使用jQuery编辑表单时确认离开页面

我正在编写一个表单，我需要像stackoverflow这样的函数：“你已经开始编写或编辑post了。”

我已经查看了stackoverflow的代码，看看他们是如何做到这一点的，但是我根本没有把它应用到我的简单表单中。 这就是他们对question.js的看法：

function initNavPrevention(b) { if (b.which == "undefined") { return } var a = $("#wmd-input"); a.unbind("keypress", initNavPrevention); setConfirmUnload("You have started writing or editing a post.", a) } 

其中一个函数触发了这个（我不知道c是什么）：

 if (c) { e.keypress(initNavPrevention) } 

最后他们有setConfirmUnload(null); 我猜想禁用它。

我的情况很简单。 我有一个页面，我通过AJAX加载

，我想阻止加载此表单离开页面而不点击SUBMIT按钮，或者如果用户单击CANCEL，表单被禁用，防止不会弹出。

拥有此代码，有人可以告诉我如何将其包含在我的网站上吗？

这是我加载表单的AJAX函数：

 $("#projects_historics_edit_part_1").click(function(){ $("#ajax-loader").fadeIn('normal'); $.ajax({ url: BASE_URL + 'projects/ajax/get_historics_edit_part_1/' + PROJECT_ID, type: "POST", success: function(data) { $("div#projects_historics_part_1").html(data); $("#client").autocomplete(client_autcomplete_options); var inicofin = $("#initdate, #findate").datepicker(initdate_datepicker_options); } }); $("#ajax-loader").fadeOut("normal"); return false; }); 

先感谢您！

Answer 1

你可以使用window.onbeforeunload这样做：

 window.onbeforeunload = function() { return 'Are you sure you want to navigate away from this page?'; }; 

所以在你的代码中，你会把它放在$.ajax调用的success回调中。

要取消确认，您可以这样做：

 window.onbeforeunload = null; 

另外，请参阅以下答案： 如何覆盖OnBeforeUnload对话框并将其替换为我自己的对话框？

Answer 2

这就是JQuery中的方法

 $('#form').data('serialize',$('#form').serialize()); // On load save form current state $(window).bind('beforeunload', function(e){ if($('#form').serialize()!=$('#form').data('serialize'))return true; else e=null; // ie; if form state change show box not. }); 

你可以使用Google JQuery Form Serialize函数，这将收集所有表单输入并将其保存在数组中。 我猜这个解释已经够了:)

Answer 3

基于Wasim的出色答案，我为此做了一个通用的function：

 var confirm_nav_ignore = []; function confirm_nav() { function save_form_state($form) { var old_state = $form.serialize(); $form.data('old_state', old_state); } // On load, save form current state $('form').each(function() { save_form_state($(this)); }); // On submit, save form current state $('form').submit(function() { save_form_state($(this)); }); // strip fields that we should ignore function strip(form_data) { for (var i=0; i 

变化：

1. 允许在未经确认的情况下提交表单。
2. 使用$（'form'）使用多个表单。每个（...）
3. 不依赖于具有id =“form”的表单
4. 返回''作为自定义确认消息，而不是在Chrome中显示“true”的true。
5. 对于困难的页面，可以告诉它忽略某些表单字段。
6. 从负载处理程序的末尾运行它......似乎是一个好主意。
7. 它足够通用，因此我们可以在网站的每个页面上使用它。

它可能看起来过于设计，但这是我必须做的才能使它在真实的Web应用程序中正常工作。

感谢Wasim，使用JQuery $（form）.serialize（）的好主意。