如何停止HTML/jQuery中的雙表單提交？

我在我的HTML頁面中有一個表單，其中包含一個標籤，一個輸入字段和一個提交按鈕。這裏是一個例子：如何停止HTML/jQuery中的雙表單提交？

<form id="myForm" action="#"> 
<label for="myField">My field</label> 
<input type="text" id="myField" name="myField" class="required"> 
<input type="submit" value="Send" /> 
</form>

在我的JavaScript代碼中，我使用jQuery將事件處理程序綁定到提交事件。此事件處理程序覆蓋默認提交操作。它驗證表單，執行動畫，然後使用ajax調用將字段值提交給服務器。這裏是一個例子：

$("#myForm").bind("submit", function() { 
    var valid = $("#myForm").validate().form(); 
    if (valid) { 
    var val = $("#myField").val(); 
    $("#myForm").animate(/* blah */, function() { 
     $.ajax({ 
     // ajax call here... 
     }); 
    }); 
    } 
    return false; // cancel default submit action 
});

請注意，這是一個簡化的例子，我的真實代碼更復雜;我也有不同行爲的多種形式。

現在，我正在尋找一個優雅的解決方案，以避免重新進入：目前，用戶可以多次點擊返回鍵，這將導致我的事件處理程序被多次調用，因此多個動畫和ajax要求。我不能簡單地在處理程序中解除綁定/重新綁定，因爲處理程序正在重寫默認的提交行爲。此外，處理程序本身將回調函數添加到其他函數：animate（）和ajax（）。

我能想到的唯一解決辦法是增加一個布爾信號，我設置爲true/false作爲在下面的示例：

var myFormSubmitExecuting = false; 
$("#myForm").bind("submit", function() { 
    if (myFormSubmitExecuting) return; 
    myFormSubmitExecuting = true; 
    var valid = $("#myForm").validate().form(); 
    if (valid) { 
    var val = $("#myField").val(); 
    $("#myForm").animate(/* blah */, function() { 
     $.ajax({ 
     // ajax call here... 
     // when done : 
     myFormSubmitExecuting = false; 
     }); 
    }); 
    } else { 
    myFormSubmitExecuting = false; 
    } 
    return false; // cancel default submit action 
});

，我寧願我可以寫一次通用的解決方案，適用於我所有的表格。有什麼建議麼？

來源

2011-11-03 Patrick J Collins

您可以將信號添加到表單本身，而不是像'$（this）.data（「SubmitExecuting」，true）'這樣的全局變量。 –

我剛剛在做這樣的事情，可能它可能會幫助你。它基本上禁止發佈提交字段，並重新啓用它在成功處理程序。

var form = $('form#some-form'); 
var submit = $('input[type=submit]', form); 

var submit_data = form.serialize(); 

submit.attr('disabled', true); 
$.post(url, submit_data, function (data) { 
    submit.attr('disabled', false); 
    .... 
});

來源

2011-11-03 10:35:16 Calvin

禁用表單或添加信號量基本上是相同的，但這不是一個真正的通用解決方案 - 每次我想要綁定到事件後，都必須記住這一點。 –

我想你可以關閉提交事件的提交按鈕，然後在你的ajax調用完成時啓用它。使用.attr('disabled', 'disabled')禁用和.attr('disabled', '')啓用（相對於您的按鈕的功能）。您可以將元素ID傳遞給將處理所有內容的ine函數。希望它有幫助。

來源

2011-11-03 10:20:48 Rynkadink

如何停止HTML/jQuery中的雙表單提交？

回答

相關問題