如何通過表單驗證防止雙重提交

Question

我一直在研究這個問題的最后一天左右。 我試圖阻止用戶雙擊我的 django 項目的提交按鈕並提交表單兩次。 我也在做表單驗證，所以如果表單驗證失敗，我不想禁用提交按鈕。 在這種情況下，我的表單驗證阻止了雙重提交，因為我的表單中有一個唯一的字段可以防止雙重提交。 我也在提交后進行重定向，但是如果我雙擊或三次單擊提交按鈕，表單將失敗並且從不進行重定向。

我已經嘗試了以下代碼的各種版本，我在類似的 SO 問題上找到了這些代碼...

                  $(document).ready(function (){
                     $('form').submit(function() {
                    $('#status').attr('disabled', true);
                      });
                    });

作為更新，我已經合並了如下概述的代碼：

                $(document).ready(function (){
                  $("#status").click(function() {
                     if(!$("form").hasClass("submitted")){
                       $("form").addClass("submitted");
                       $("form").submit();
                     }
                   });
                 });

這似乎有效......但也許我錯過了一些東西。 如果用戶在初始提交后一秒鍾點擊按鈕，它會嘗試重新提交表單，也許這就是上面設計的？ 我想我試圖阻止雙擊並允許重定向發生，如果用戶沒有妨礙它的話:)。 在正常情況下，我正在運行的這段代碼運行良好......並在初始提交后重定向。 即使用戶再次單擊，是否有某種方法可以防止這種情況按預期發生？

就我的代碼而言，我試圖通過我的提交按鈕傳遞一個值，因此，使用上面的代碼可以防止在我合並它時傳遞該值。 我正在使用 HTML，如下所示：

<button type="submit" class="button15" name="status" id="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

如果我將上面的 JQuery 與顯示的 HTML 一起使用，它們似乎會發生沖突，但它仍然不會阻止提交。

預先感謝您提供有關如何合並表單驗證並防止用戶雙擊表單並提交兩次的任何想法。 我還看到了一些使用會話特定變量的示例，但希望盡可能使用 JQuery/Javascript 來解決。

我剛剛測試了下面的代碼，它似乎正在執行，但沒有提交表單。 也沒有錯誤。

                $(document).ready(function (){
                  $("#status73").click(function() {
                     if(!$("form").hasClass("submitted")){
                       console.log("hello world");
                       $("form").addClass("submitted");
                       $(window).unbind('beforeunload');
                       $("form").submit();
                     }
                   });
                 });

hello world 是為了查看它是否正在執行，事實上它正在執行。 但是，我的 Django 表單沒有被處理。 如果我將上面的代碼與此 HTML 一起使用...

<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

表單未提交。 如果我將上面的代碼與此 HTML 一起使用，則表單確實會被提交....

<button type="submit" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

區別在於按鈕類型。 再次，我是新來的，所以我邊走邊學。 感謝您的投入。

我相當確定問題是當按鈕更改為從提交鍵入按鈕時，我沒有傳遞提交的值。 當用戶單擊提交按鈕時，有什么方法可以提交隱藏的值嗎？ 我嘗試過類似...

<input type="hidden" name="status" value="Submitted"/>
<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

但這似乎並沒有將狀態值傳遞給表單。 沒發生什么事。

我剛剛檢查了我的控制台日志，我有以下錯誤：

Uncaught ReferenceError: checkForm is not defined
    at HTMLFormElement.onsubmit ((index):104)
    at Object.trigger (jquery.min.js:2)
    at HTMLFormElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at w.fn.init.w.fn.(:8000/book/author/anonymous function) [as submit] (http://127.0.0.1:8000/static/jquery/jquery.min.js:2:85786)
    at HTMLButtonElement.<anonymous> ((index):23)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)

我還嘗試了一些隱藏值。 探索上面的錯誤。

我的 HTML 中有一個來自之前嘗試的剩余 onsubmit 操作，這導致了我的大部分悲傷。 我還將狀態字段更改為隱藏在表單上而不是 HTML 元素中。 謝謝大家的幫助！！！！！！

Answer 1

您可以將按鈕類型更改為按鈕，並在表單最初提交時為其添加一個類。 如果班級存在，則不要提交表格。 這可以防止禁用按鈕。

請參閱以下使用 jQuery 的示例。 請注意，這假設您的驗證阻止提交表單。

 $("#status").click(function() { if(!$("form").hasClass("submitted")){ $("form").addClass("submitted"); $("form").submit(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action=""> <input type="text"/> <button id="status" type="button" value="Submitted">Submit</button> </form>