Question

我使用以下功能来防止双重提交：

$("#form").submit(function () {  
    var form = $(this);  
    form.find("input[type=submit]").attr("disabled", "disabled")  
    form.find("input[type=submit]").attr("value", "Processing");  
  });

它工作正常，但后来我有以下代码触发警报以避免意外离开页面：

function goodbye(e) {
     if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = '¿DO YOU REALLY WANT TO LEAVE THIS PAGE?'; //This is displayed on the dialog

//e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

window.onbeforeunload=goodbye;

问题是，如果用户点击提交并且意识到他不想离开页面并点击停留在此页面上，则仍然会禁用提交按钮。

如果点击此页面上的停留后如何重新启用它？

谢谢！

Answer 1

按钮问题

你想要禁用并启用提交按钮，这样你就知道两次触摸相同类型的功能和对象，最好在功能中利用这个功能

function disableSubmit(form, enabled){
    var submit = form.find("input[type=submit]"),
        dataVar = enabled !== true ? "processing-message" : "send-message",
        message = submit.data(dataVar);

    submit.prop('disabled', (enabled !== true) );
    submit.val(message);
}

我可以使它在每个表单上使用它更加通用。但是按钮中的消息将显示您放入数据属性中的任何内容。

取消提交

取消onbeforeunload事件时出现问题;它有没有回调。我带来的解决方案是使用超时。由于您不知道该人是否被取消，我认为该页面提交2秒就足够了。您必须有2秒钟的患者才能再次启用提交按钮。但是你可以随心所欲地调整它

if (e.stopPropagation) {
    setTimeout(function () {
        disableSubmit(formObject, true);
    }, 2000);
    e.stopPropagation();
    e.preventDefault();
}

The JSFiddle example

防止双重提交，防止窗口事件发生

1 个答案:

按钮问题

取消提交