时间戳

首页 > 解决方案 > 使用JS提交时防止多个表单提交

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

问题描述

我正在使用 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();
    });
});

标签： javascript

解决方案

您可以在触发 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>

推荐阅读