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，然后才能添加新处理程序。

要使用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 中返回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') ");

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

4 个答案: