Javascript 返回 false;不会取消另一个 .submit jQuery 调用的表单提交

Javascript return false; is not cancelling a form submit for another .submit jQuery call

本文关键字：jQuery submit 调用 表单提交 另一个 取消 false 返回 Javascript      更新时间：2023-09-26

我在每个页面上都注入了这个jQuery函数，以便在单击后禁用提交按钮。

$('form').submit(function () {
        var btn = $('input[type=submit]', this);
        disableButtonOrLink.disableSubmit(btn);
        btn = $('button[type=submit]', this);
        disableButtonOrLink.disableSubmit(btn);
    });

问题是我也有一些后端验证，有时以这样的形状附加到表单上

 <form action="someAction" method="post" name="someForm" class="form" 
    onsubmit="var invalid=false; 
    invalid=someAction(); 
    if(invalid){return false;}"
    id="someForm">

我遇到的问题是（'form'）.submit 操作总是在返回 false 后被调用。由于返回错误，表单实际上并未提交;但是这个jQuery函数仍然被调用。有没有办法防止这个.submit被调用？

只是为了澄清正在发生的事情：正在调用表单上的 onSubmit;

返回错误部分被击中并正确取消提交;

onSubmit 完成后，仍会调用 （'form'）.submit，就好像表单的提交未被取消并且正在禁用按钮一样。

我想防止最后一步发生。

您可以使用

JQuery 在form中找到这些按钮，并使用一种方法来阻止它们通常执行的操作。
例：
$("form button").on('click', function(e){ e.preventDefault(); });

我可能会尝试这样的事情

$('#someForm').on('submit', function(e) {
    if ($(this).data('some-action')) {
        e.preventDefault();
        return false;
    }
    //... then disable buttons, etc
});

在这种情况下，您需要将属性data-some-action添加到表单中，并使用您正在执行的任何后端验证进行评估。

更新

$('#someForm').on('submit', function(e) {
    if ($(this).data('some-action') == 'error-message') {
        e.preventDefault();
        alert('error!');
        return false;
    }
    if ($(this).data('some-action') == 'reload') {
        e.preventDefault();
        document.location.reload(true);
    }
    //... then disable buttons, etc
});
相关文章：