how to prevent double form submission

There are multiple ways, through which we can prevent double form submission on web page or web forms. There is a simple way to prevent duplicate form submissions using jQuery. This script prevents a form from being submitted twice.

1. Disabling the Submit Button Using Javascript

The trick is to use JavaScript to set the disabled property of the button to true. The disabled property was first introduced by Microsoft but has since been adopted as a standard by the W3C.

For a simple form, with no associated JavaScripts, you can use:

<form onsubmit="mySubmitButton.disabled = true; return true;">
<input type="submit" name="mySubmitButton" value="Submit">
</form>

IF you have already uses the form validation script then, add the following function at the end of your page

<form onsubmit="return checkForm(this.form);">
<input type="submit" name="mySubmitButton" value="Submit">
</form>

<script type="text/javascript">
  function checkForm(form)
  {
    // check form input values
    form.mySubmitButton.disabled = true;
    return true;
  }
</script>

2. Disabling the Submit Button Using  jQuery

Instead of binding the submit event of FORM, try using the click handler of submit button and used:

$('form :submit').click( function () {
    $(this).prop("disabled", true).closest('form').append($('<input/>', {
        type: 'hidden',
        name: this.name,
        value: this.value
    })).submit();
});

3. Preventing double-clicks on links

While the standards suggest that a normal HREF link shouldn't trigger any action other than navigation, it is often the case that links do trigger an action, and the same problems can arise from people double-clicking.

A quick fix for this is to add an onclick handler to the links that disables it for subsequent clicks:

<script type="text/javascript"> 
function clickStopper(e) {
   alert("click was blocked"); 
   // you can remove this line 
    e.preventDefault();
   // equivalent to 'return false' 
} 
</script> 
<p>
   <a href="#target" onclick=" this.addEventListener('click', clickStopper, false); ">click me</a>
</p>