解决意外的多个表单条目

Question

我有jquery / ajax：

$('form').bind('submit', function () {
     $.ajax({
         type: 'post',
         url: "Write-to.php",
         data: $("form").serialize(),
         success: function () {
             $.get("Data.php", function (data1) {
                 console.log(data1);
                 $(".data").html(data1);
                 scrolltobottom();
                 setFocusToTextBox();
                 $("#usermsg").val("");
             });
             $('.submited').show();
             $('.submited').html("S E N T");
             $("#usermsg").val("");

             setTimeout(function () {
                 $('.submited').fadeOut(1000);
             }, 2000);
         }
     });

     return false;
 });

但是当我点击输入时，我仍然需要等待$("#usermsg").val("");之前的一点，这会导致意外双重进入，因为用户认为他们实际上没有发送表格。

我在php中设置了一个不允许任何空表单的函数。

如何防止多次输入？

Answer 1

您可以在提交表单后取消绑定提交，并使用return false;绑定另一个函数，以防止再次提交表单。

var submitting = 0;
$('form').bind('submit', function () {
     if(!submitting)
     {
         submitting = 1;
         $.ajax({
             type: 'post',
             url: "Write-to.php",
             data: $("form").serialize(),
             success: function () {
                submitting = 0;
                $.get("Data.php", function (data1) {
                     console.log(data1);
                     $(".data").html(data1);
                     scrolltobottom();
                     setFocusToTextBox();
                     $("#usermsg").val("");
                });
                $('.submited').show();
                $('.submited').html("S E N T");
                $("#usermsg").val("");

                setTimeout(function () {
                   $('.submited').fadeOut(1000);
                }, 2000);
            }
        });
     }
     return false;
 });