Question

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

我要做的是阻止用户将此表单保留为未保存状态。所以我在表单输入更改或粘贴时将变量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＆amp; performSearch（）仍然继续执行。

理想情况下，如果用户选择SAVE，我只想运行函数/跟随URL，如果用户按CANCEL则不执行任何操作。

显而易见的解决方案是将此逻辑放在openForm中并执行Search函数，但这是一个非常简单的示例，因为真实页面有许多不同的函数，这些函数在很多页面上共享，因此这不太可能

Answer 1

你可能想要这样的东西：Javascript - Confirmation when leaving page

而不是代码最后一部分中的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~~

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

2 个答案: