javascript - 如何在 ajax 请求中禁用/启用表单提交

Question

我正在尝试在请求开始之前先禁用表单提交，然后在成功后再次启用表单提交

这是我的代码：

$.ajax({
 beforeSend:function(){
//disable form
            $('form').on('submit',function(){
               return false;
            });
},
success:function(){
            //enable form
            $('form').on('submit',function(){
               return true;
            });
},
complete:function(){
            //enable form
            $('form').on('submit',function(){
               return true;
            });
,
});

似乎无法成功并完成，该表单已禁用但未启用。

我正在使用最新的 jQuery 版本。

Answer 1

更好地使用不同的策略：设置一个全局变量来决定是否提交表单。然后在提交表单时检查它。

var canSubmit = 1;

$.ajax({
 beforeSend:function(){
   //disable form
   canSubmit = 0;
},
success:function(){
   //enable form
   canSubmit = 1;
},
complete:function(){
   //disable form
   canSubmit = 1;
});

$('form').on('submit',function() {
   if (!canSubmit) {
      return false;
   }
});

Answer 2

jQuery 事件通常支持多个处理程序，因此您需要在附加新的事件处理程序之前关闭以前的事件处理程序。

要使用off，您需要保留对您的处理程序的引用，例如

var myForm = $("form"),
    enableSubmit = function(event) { return true; },
    disableSubmit = function(event) { return false; },
    ajaxCompleteHandler = function() {
        myForm.off(disableSubmit);
        myForm.on(enableSubmit);
    };

myForm.on(enableSubmit);

$.ajax({
    beforeSend: function() {
        myForm.off(enableSubmit);
        myForm.on(disableSubmit);
    },
    success: ajaxCompleteHandler,
    error: ajaxCompleteHandler,
    complete: ajaxCompleteHandler //you might get away with just this as I believe it's called for success and failure
});

或者，您可以禁用提交按钮($("mybutton").prop("disabled", true)），这对用户来说应该更直观。

Answer 3

而不是在beforeSend中执行 return false尝试这个

$('form').on('submit',function(e){
   e.preventDefault();
   return false;
});

Answer 4

一旦你在提交按钮上返回 false，很明显你不能再次调用提交操作，因为表单现在不能提交信息。

另一种解决方案是使用 onclick 功能，如下所示：

Javascript 文件

function savecustomquestion(){
$.ajax({
        type : 'POST',
        url : 'customquestion.php',
        data:{tablename:$('#productname').val(),name:$('#uname').val(),email_address:$('#email').val(),voucher_code:$('#voucher_code').val(),question:$('#customquestion').val()},
        success: function(response){
            console.log("yes");
        },
        error : function(response){
            console.log(response);
        }
    });

}

HTML 代码

<button type="button" id="customquestionbutton" class="span2" onclick="savecustomquestion()">Verstuur</button>

PHP 代码

mysql_select_db('mydatabase',$connect);

if(!isset($_POST['voucher_code'])){
    $voucher_code   = "";
}
else{
    $voucher_code   = $_POST['voucher_code'];
}
$email_address = $_POST['email_address'];
$name          = $_POST['name'];
$question      = $_POST['question'];
$tablename     = $_POST['tablename'];

mysql_query("insert into customquestion (voucher_code,email_address,name,question)    VALUES('$voucher_code','$email_address','$name','$question') ");