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

Question

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

我想要做的是阻止用户将该表单置于未保存状态。所以我在表单输入更改或粘贴时将变量 formChanged 设置为 TRUE。 IF 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 和 PerformSearch 函数中，但这是一个过于简单化的示例，因为真实页面有数十个不同的函数，这些函数在许多页面上共享，因此这实际上是不可能的

Answer 1

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

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

在 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