我如何禁用/啟用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

一旦在Submit按鈕上返回false，很明顯您無法再次調用Submit操作，因為該表單現在無法提交信息。

另一個解決方案是使用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') ");