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

Question

我有一个客户表，每一行都有一个弹出内联表单的方法，显示客户详细信息。此页面上还有一个搜索，一些选项卡以及一些href链接和功能。

我正在尝试做的是防止用户能够将此表单保留为未保存状态。 所以我有一个变量 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，如果用户按取消，则什么都不做。

显而易见的解决方案是将此逻辑放在openForm中并执行Search功能，但这是一个非常过于简化的示例，因为实际页面具有数十种不同的功能，这些功能在许多页面上共享，因此这实际上是不可能的

Answer 1

你可能想要这样的东西： Javascript - 离开页面时确认

检查 formChanged 变量，而不是代码最后一部分中的if(disabledConfirm_exit) return;。

在jQuery中 - 你可以使用这个： http://api.jquery.com/unload/

Answer 2

更新

我不知道是否有更好的模式或一些现有的方法，你可以使用，但在有人发布更好的答案之前，这就是我所拥有的。您可以编写一个委托方法，该方法将在任何地方调用并作为参数调用，将获得要调用的函数和该函数的参数。它可以检查表单是否已更改 - 如果没有，它将调用相应的函数，否则它会提示用户。像这样：

<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