如何有条件地提交表单？

Question

我在我的动态 html 页面中使用以下表单和提交按钮。

<form method=\"post\" class=\"my-form\" >

和

<input type=\"submit\" name=\"submitButton\" value=\"Submit\" id=\"button1\" />

我要做的是当用户提供特定输入时，然后显示一个警告框，询问用户是要提交更改还是只停留在同一页面而不提交更改。

我可以显示警报框（在 stackoverflow 成员的帮助下），但连同 window.alert 我应该添加到 JavaScript 的内容，因此如果用户单击 window.confirm 上的“取消”并提交表单，则不会提交表单用户在 window.confirm 上点击“确定”？

JavaScript 示例位于 fiddle

$(document).on('input', '.my-input', function(){
    $(this).closest('form').addClass('changed');
});

$(document).on('submit', '.my-form', function(e){
    if($(this).hasClass('changed')){
     var x=window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
    if (x)
        window.alert("Thresholds changed!")
    else
        window.alert("Thresholds not changed!")
    } 
    $(this).removeClass('changed');
    e.preventDefault();
});

Answer 1

您只需要更改您的逻辑，以便仅在用户拒绝确认框时调用preventDefault()。试试这个：

$(document).on('submit', '.my-form', function (e) {
    if ($(this).hasClass('changed')) {
        var allowSubmit = window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
        if (!allowSubmit) 
            e.preventDefault()
    }
});

Example fiddle

如果您单击“确定”，您将看到表单已提交（并且来自 jsFiddle 的警告以使用 POST 请求 - 但这是正常的），而单击“取消”则不会执行任何操作。

Answer 2

您也可以在提交函数处理程序中返回 false，它应该可以工作。以this question 为例。