如何防止用戶兩次提交表單

Question

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>

當用戶點擊兩次添加按鈕時，從提交兩次同樣的數據到表中。 所以請幫我限制用戶兩次提交。

Answer 1

提交表單后，使用jQuery附加一個處理程序，該程序員劫持並“禁用”提交處理程序：

var $myForm = $("#my_form");
$myForm.submit(function(){
    $myForm.submit(function(){
        return false;
    });
});

從提交處理程序返回“false”將阻止表單提交。 禁用按鈕可能會對表單的處理方式產生奇怪的影響。 這種方法似乎基本上沒有副作用，甚至可以在具有多個提交按鈕的表單上工作。

Answer 2

試試這個代碼..

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />

Answer 3

您可以在單擊或隱藏按鈕后禁用該按鈕。

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>

js：

 function disableButton(button) {
     button.disabled = true;
     button.value = "submitting...."
     button.form.submit();
}

Answer 4

您可以通知用戶他喝了太多咖啡，但最好是用javascript禁用按鈕，例如：

$("#btnADD").on('click', function(btn) {
  btn.disabled = true;
});

Answer 5

如果您正在使用Java服務器端腳本並使用struts 2，那么您可以參考此鏈接，該鏈接討論使用令牌。

http://www.xinotes.org/notes/note/369/

當請求與令牌第一次一起提交時，應該生成一個令牌並保存在初始頁面呈現的會話中，在struts動作中運行一個線程名稱作為令牌ID的線程並運行邏輯，無論客戶端具有什么請求，當客戶端再次提交相同的請求時，檢查線程是否仍在運行（thread.getcurrentthread（）。中斷）如果仍在運行，則發送客戶端重定向503。

如果你沒有使用任何框架並尋找簡單的鍛煉 。 你可以幫助

java.util.UUID.randomUUID();

只需將隨機uuid放在會話中，也可以放在隱藏表單字段和另一側（jsp頁面，您正在處理其他工作，如將數據存儲到數據庫等）。從會話和隱藏表單字段中取出uuid，如果表單字段匹配比繼續進行，從會話中刪除uuid，如果不是，則表示可能已重新提交。

為了您的幫助，我正在編寫一些代碼片段，以便了解如何實現該功能。

<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>

Answer 6

我根據rogueleaderr的答案提出了一個解決方案：

jQuery('form').submit(function(){
    jQuery(this).unbind('submit'); // unbind this submit handler first and ...
    jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
        return false;
    });
    console.log('submitting form'); // only for testing purposes
});

Answer 7

當用戶單擊“提交”按鈕時，禁用該按鈕。

<form onSubmit="disable()"></form>

function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}

Answer 8

你可以使用JavaScript。

附上form.submit.disabled = true; 到表單的onsubmit事件。

精明的用戶可以繞過它，但它應該阻止99％的用戶提交兩次。

Answer 9

單擊“確定”時，可以使用彈出的“確定”按鈕顯示成功的消息，重定向到其他位置

Answer 10

禁用“提交”按鈕

$('#btnADD').attr('disabled','disabled');

      or

$('#btnADD').attr('disabled','true');

Answer 11

為表單創建一個類，在我的例子中我用過： _submitlock

$(document).ready(function () {
  $(document).on('submit', '._submitlock', function (event) {

      // Check if the form has already been submitted
      if (!$(this).hasClass('_submitted')) {
          // Mark the form as submitted
          $(this).addClass('_submitted');

          // Update the attributes of the submit buttons
          $(this).find('[type="submit"]').attr('disabled', 'disabled');
          // Add classes required to visually change the state of the button
          $(this).find('[type="submit"]').addClass("buttoninactive");
          $(this).find('[type="submit"]').removeClass("buttonactive");

      } else {
          // Prevent the submit from occurring.
          event.preventDefault();
      }

  });});

Answer 12

您可以在表單和提交按鈕中添加一個類並使用jquery：

 $(function() { // prevent the submit button to be pressed twice $(".createForm").submit(function() { $(this).find('.submit').attr('disabled', true); $(this).find('.submit').text('Sending, please wait...'); }); }) 

Answer 13

我對類似問題的解決方案是創建一個單獨的隱藏提交按鈕。 它的工作原理如下：

• 單擊第一個可見按鈕。
• 第一個按鈕被禁用。
• onclick導致按下第二個提交按鈕。
• 表格已提交。

<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>

我走這條路線只是為了清楚其他人在編寫代碼。 還有其他解決方案可能在主觀上更好。

Answer 14

在所有按鈕上輸入一個類type =“submit”，例如“button-disable-onsubmit”，並使用如下的jQuery腳本：

$(function(){
    $(".button-disable-onsubmit").click(function(){
         $(this).attr("disabled", "disabled");
         $(this).closest("form").submit();
    });
});

請記住將此代碼保存在通用javascript文件中，以便您可以在許多頁面中使用它。 像這樣，它成為一種優雅且易於重復使用的解決方案。 此外，您甚至可以添加另一行來更改文本值：

$(this).val("Sending, please wait.");

Answer 15

提交時向表單添加一個類，停止用戶雙擊/提交

$('form[method=post]').each(function(){
   $(this).submit(function(form_submission) {
     if($(form_submission.target).attr('data-submitted')){
        form_submission.preventDefault();
     }else{
        $(form_submission.target).attr('data-submitted', true);
     }
  });
});

Answer 16

這是一個老問題，但是我的表格問題在這里沒有答案，並認為它可能有用，因為我懷疑這是一個常見的問題。

我在我的表單上使用jQuery驗證，如果用戶嘗試提交表單，但前端驗證阻止表單提交，則仍然禁用提交按鈕，這意味着用戶無法提交表單。

擴展了rogueleaderr的最佳答案，我添加了一個快速檢查，以確保在禁用重新提交表單之前沒有前端錯誤消息：

 <script> $(document).ready(function () { var $myForm = $("#My-Form-Class"); $myForm.submit(function(){ if ($(".Front-End-Error-Class")[0]){ console.log("Front End error messages are present - don't submit"); } else{ $myForm.submit(function(){ return false; }); } }); }); </script> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

它只是檢查以確保在禁用表單之前屏幕上沒有錯誤類。