javascript - 使用JS提交时防止多次表单提交

Question

我正在使用 JS 提交表单。如何防止用户多次发送表单？

我尝试添加 onclick按钮的功能如下:

<button type="button" class="btn btn-primary add_table_1" id="submit_add_table_1" onClick="this.disabled=true">Verstuur</button>

这会在单击时禁用按钮，但不会提交表单。

有什么建议可以防止多次提交操作吗？

这是我用于提交的JS代码

$(document).ready(function () {
    $("#add_table_1").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL='processing/factuur_add.php';
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $('#modal_add_table_1 .modal-body').html(data);
                $("#submit_add_table_1").remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });

    $("#submit_add_table_1").on('click', function() {
        $("#add_table_1").submit();
    });
});

Answer 1

您可以在触发 AJAX 调用之前禁用该按钮，如果出现错误，您可以重新启用它(就像您在成功后已将其删除一样)。

类似这样的:

$("#add_table_1").on("submit", function(e) {
    $("#submit_add_table_1").prop('disabled', true);
    ...

<小时/>

下面是一个使用 1 秒响应时间进行模拟的简单示例:

$('#b').on('click', function(){
  $('#b').prop('disabled', true);
  $('#c').text(parseInt($('#c').text(), 10) + 1);
  setTimeout((()=>$('#b').prop('disabled', false)), 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="b">Submit</button>
<p>Click count: <span id="c">0</span><p>
<p>(try clicking the button multiple times)</p>