防止多個表單提交

我使用JQuery和綁定到div的事件偵聽器（而不是輸入字段）提交表單，我試圖阻止多次提交，所以客戶不會被濫收。我試圖通過刪除點擊的div的submit-button類來實現此目的，所以當用戶下次點擊它時，JQuery將不會收聽與防止多次提交相關的事件。防止多個表單提交

但是，使用下面的實現，出於某種原因，並不妨礙多次提交，如預期的那樣。

HTML

<div class="submit-button button-style">Submit</div>

JQuery的

$(".submit-button").click(function(){ 
    $(this).removeClass("submit-button"); 
    //**submit form** 
});

注：我一定要堅持使用上面的HTML的解決方案，因此使用submit類型的input元素的解決方案，也不會有用。

我很感激任何關於如何使這項工作的建議。提前謝謝了！

來源

2013-08-04 AnchovyLegend

所以現在你不得不處理重新驗證和重新渲染。讓我簡單地說一下：如果你想讓它正常工作，*正確地做*。這意味着「類型'submit'的'input'元素。它存在*來處理這個用例。如果您願意，您可以讓用戶度過愉快的時光，重新學習過去15年來Web瀏覽器開發人員已詳盡調試的內容，或者您可以正確地做到這一點。我會推薦後者。 – AdamKG

我很欣賞這個答覆。如果這是我的選擇，我會選擇正確的方式使用「輸入」字段。但是，即使採用「輸入」字段方法，也需要採取一些措施來防止多個表單提交，但這不是自動的。 – AnchovyLegend

@AdamKG Pah！難道你不知道無障礙是爲了弱者！誇張的設計促進了用戶羣的合規性。如果他們不喜歡它，那麼他們可以簡單地打開控制檯並編寫自己的代碼。 – Dave

您可以使用.one()，以防止其發射多次 -

$(".submit-button").one('click',function(){ 
    //**submit form** 
});

http://api.jquery.com/one/

編輯：

在錯誤的情況下：

function submitForm(){ 
    //**submit form** 
    $.post('submit.php').error(function(){ 
     // rebind event on error 
     $(".submit-button").one('click',submitForm); 
    }); 
} 
$(".submit-button").one('click',submitForm);

來源

2013-08-04 20:02:54

打我13秒！ – dezman

+1，謝謝你的建議！這似乎很有用，我從來沒有聽說過'one（）':)，但是，有一個小問題，如果有服務器錯誤，我需要重新啓用一個額外的嘗試...這裏的任何建議？ – AnchovyLegend

@AnchovyLegend如果發生錯誤，您可以使用'.one（）' –

你可以使用類似於：

$('something').one('click', function(){ 
    // submit code 
});

其中只會觸發一次。

來源

2013-08-04 20:03:08 dezman

很大一部分用戶不用費心點擊提交按鈕來提交表單 - 還有其他更方便的方法，比如當光標焦點位於表單域時按下回車鍵。

更強大的方法是通過表單提交事件來阻止表單，並維護一個變量以跟蹤表單提交狀態。

var submitted = false; 
$("form#myForm").submit(function(evt){ 
    if (submitted) { 
     evt.preventDefault();//stops form submission 
     return; 
    } 

    submitted = true; 
});

我省略了此示例的表單驗證。

來源

2013-08-04 21:57:54 goat

防止多個表單提交

回答

相關問題