jQuery - 防止提交未保存的表单

我有一张客户表，每行都有一个方法，弹出一个内联表单，显示客户的详细信息。在这个页面上还有一个搜索，一些标签和一些href链接&函数。jQuery - 防止提交未保存的表单

我想要做的是防止用户能够将此表单保留在未保存的状态。所以我有一个变量formChanged设置为TRUE表单输入更改或粘贴。如果formChanged == true，那么我不希望用户能够点击链接或执行搜索，直到他们确认是否保存数据。

我使用以下，以提示用户：

$(document).click(function(eve) { 
    if (!$(eve.target).is('#form *')) { 
     if (formChanged) { 
      if (confirm("Do you want to save the data or continue to edit?")) { 
        $('#form').submit(); 
        return true; 
       } 
      else { return false; } //here I do not want to submit the form OR continue with the openForm() method; 
     } 
    } 
});

HTML标记（简化的）是这样的：

<a href="/new">New Customer</a> 
<a href="javascript:performSearch();">Search</a> 
<table> 
    <tr> 
     <td onclick="openForm(1);">Customer One</td> 
    </tr> 
    <tr> 
     <td onclick="openForm(2);">Customer Two</td> 
    </tr> 
    <tr> 
     <td><form> //form gubbins loaded via ajax in here </form></td> 
    <tr> 
     <td onclick="openForm(2);">Customer Two</td> 
    </tr> 
</table>

我有被我可以捕获确认逻辑的问题，但其他功能，如openForm & performSearch（）仍然继续执行。

理想情况下，我想只运行功能/跟随URL如果用户选择保存，并且如果用户按下CANCEL，则不执行任何操作。

显而易见的解决办法是把在的OpenForm和performSearch功能这个逻辑，但是这是一个非常简化的示例，作为真正的页面有几十种不同的功能，这是在许多网页共享，因此，这是不是真的有可能

来源

2011-05-20 danielc

你可能想是这样的：Javascript - Confirmation when leaving page

而是在代码的最后一节的if(disabledConfirm_exit) return;的，检查formChanged变量。

在jQuery的 - 你可以这样做：http://api.jquery.com/unload/

来源

2011-05-20 02:01:14 zsalzbank

可是如何才能让。卸载在showForm（）函数中执行，类似于这样的操作。$（'＃form'）。remove（）; //卸载应该在这里调用，但似乎没有？ $（'tr＃id'）。load（'getform.php'）;' – danielc 2011-05-20 02:20:21

更新

我不知道是否有一个更好的模式或者一些你可能能够使用，但直到其他人发布的现有方法更好的答案，这是我的。你可以编写一个委托方法，它将在任何地方调用，并且作为参数，将被赋予被调用的函数和该函数的参数。它可以检查表单是否已经更改 - 如果没有，它会调用相应的功能，否则会提示用户。事情是这样的：

<a href="/new">New Customer</a> 
<a href="javascript:check(performSearch);">Search</a> 
<table> 
    <tr> 
     <td onclick="check(openForm,1);">Customer One</td> 
    </tr> 
    <tr> 
     <td onclick="check(openForm, 2);">Customer Two</td> 
    </tr> 
    <tr> 
     <td><form> //form gubbins loaded via ajax in here </form></td> 
    <tr> 
     <td onclick="check(openForm, 2);">Customer Two</td> 
    </tr> 
</table>

的check功能看起来是这样的（在它的当前形式，它是真正简单，只有一个参数适用于将要调用的功能，但它可以作出更通用）：

function check(func, param){ 
    if (!formChanged){ 
     func(param); //invoke the original function 
    } 
    else{ 
     //handle the case for a modified form that the user wants to leave 
    } 
}

，如果你连接通过JavaScript的事件处理程序，而不是在HTML中指定它们你也许可以做到这一点更清洁的方式 - 不显眼的JavaScript从行为中分离标记的宗旨

~~这听起来像你正在寻找window.onbeforeunload~~

来源

2011-05-20 02:01:58

这不好，因为一切都是通过Ajax，所以窗口不会“卸载”？ – danielc 2011-05-20 02:25:45

@IIBCDaniel你说得对，我错过了。我没有一个我知道是正确的/好的答案，但是我发布了一些可能有用或没用的答案。 – 2011-05-20 05:12:41

jQuery - 防止提交未保存的表单

回答

相关问题