How to Prevent Users from Submitting a Form Twice

Question

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

when user click add button twice, from get submitted twice with same data into table. So Please help me to restrict user to submit from twice.

Answer 1

Once the form is submitted, attach a handler with jQuery that hijacks and "disables" the submit handler:

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

Returning "false" from the submit handler will prevent the form from submitting. Disabling buttons can have weird effects on how the form is handled. This approach seems to basically lack side effects and works even on forms that have multiple submit buttons.

Answer 2

try out this code..

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

Answer 3

You can disable the button after clicking or hide it.

<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

If you are working with java server side scripting and also using struts 2 then you refer this link which talks about on using token.

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

A token should be generated and kept in session for the initial page render, when the request is submitted along with the token for the first time , in struts action run a thread with thread name as the token id and run the logic whatever the client has requested for , when client submit again the same request, check whether the thread is still running(thread.getcurrentthread().interrupted) if still running then send a client redirect 503.

And if you are not using any framework and looking for simple workout. You can take help of the

java.util.UUID.randomUUID();

Just put the random uuid in session and also in hidden form field and at other side(the jsp page where you are handling other work like storing data into database etc.) take out the uuid from session and hidden form field, If form field matches than proceed further, remove uuid from session and if not than it might be possible that the form has been resubmitted.

For your help i am writing some code snippet to give idea about how to achieve the thing.

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

Answer 5

You could notify the user that he drinks too much coffee but the best is to disabled the button with javascript, for example like so:

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

Answer 6

I made a solution based on rogueleaderr's answer:

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

My solution for a similar issue was to create a separate, hidden, submit button. It works like so:

• You click the first, visible button.
• The first button is disabled.
• The onclick causes the second submit button to be pressed.
• The form is submitted.

<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;'>

I went this route just for clarity for others working on the code. There are other solutions that may be subjectively better.

Answer 8

When user click on submit button disable that button.

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

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

Answer 9

You can use JavaScript.

Attach form.submit.disabled = true; to the onsubmit event of the form.

A savvy user can circumvent it, but it should prevent 99% of users from submitting twice.

Answer 10

You can display successful message using a pop up with OK button when click OK redirect to somewhere else

Answer 11

Disable the Submit Button

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

      or

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

Answer 12

Create a class for the form, in my case I used: _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 13

Put a class on all your buttons type="submit" like for example "button-disable-onsubmit" and use jQuery script like the following:

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

Remember to keep this code on a generic javascript file so you can use it in many pages. Like this, it becomes an elegant and easy-to-reuse solution. Additionally you can even add another line to change the text value as well:

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

Answer 14

Add a class to the form when submitted, stopping a user double clicking/submitting

$('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 15

You can add a class to your form and your submit button and use 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 16

None of these solutions worked for me as my form is a chat and repeated submits are also required. However I'm surprised this simple solution wasn't offered here which will work in all cases.

var sending = 0;

$('#myForm').submit(function(){
if (sending == 0){

sending++;

// SUBMIT FORM

}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}

This only allows one submit in any one second interval.