How to Prevent Users from Submitting a Form Twice

Question

when user click add button twice, from get submitted twice with same dat

Answer 1

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 2

Disable the Submit Button

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

      or

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

Answer 3

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

Answer 4

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 5

This is an old question, but I had an issue with my form that doesn't have an answer on here and thought it could be useful as I suspect it is a common issue.

I'm using jQuery validate on my forms, and if the user tries to submit the form, but the front-end validation prevents the form from being submitted, the submit button is still disabled meaning the user cannot submit the form.

Expaniding on rogueleaderr's great answer, I added a quick check to make sure there was no front-end error messages before disabling re-submitting of the form:

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

It just checks to make sure there are no error classes on screen before disabling the form.

Answer 6

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;
});