How to restrict user from submitting the form twice?

Question

I have an asp.net form, which allow users to submit a registration form which internally sends/store all these values on SharePoint list using the web-service and hence on submit the page process time is a little lengthier then the normal form.

Mean time before the page gets redirect to a thanks page, user's tend to click the submit button again, which is causing the multipul submission of the same record.

Please suggest a way to restrict this submission, on button click I am using a jquery function for data validation, I have tried using the btn.disable = true method there, but once it reach's the else block (after passing the validation and this is where the disable = true code is) it doesn't submit's the form after reading btn.disable = true statement.

Experts, please show me a path.

Thanks in advance.

This has been answered http://stackoverflow.com/questions/9803286/prevent-double-form-submissions — StoneStone, May 03 '13 at 17:03
possible duplicate of [Prevent double submission of forms in jQuery](http://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery) — Aristos, May 03 '13 at 17:07

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

See Nathan Long's plugin: https://stackoverflow.com/a/4473801/1414562

{modified to allow re-submit form if an input change}

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  var $form = $(this);
  $form.on('submit',function(e){ //on here instead of bind    
    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  }).find('input').on('change',function(){
       $form.data('submitted',false);
  });

  // Keep chainability
  return this;
};

Use it like this:

$('form').preventDoubleSubmission();

edited May 23 '17 at 11:43

Community

1
1

answered May 03 '13 at 17:02

A. Wolff

74,033
9
94
155

If there is a change in form data and i really want to submit it again, this may not work...submitted will still be true? – Jack May 06 '13 at 12:30
@roasted : Great function, works like a charm, the only thing you need to make sure is to call the function in the else block where javascript has finished other validation check. Thanks once again. – foo-baar May 07 '13 at 07:27

score 0 · Answer 2 · answered May 03 '13 at 17:02

As you've found, if you disable the button in the onclick handler it won't send the request to the server. The simple "hack" to get around this is to, rather than disabling the button right away, use setTimeout to schedule a function to run in, say, 5ms that will disable the button; this will allow the request to be sent to the server before the button is disabled, while not leaving enough time for a person to actually click it twice.

score 0 · Answer 3 · answered May 06 '13 at 11:42

Two ways

Either in Jquery or through C#

Jquery

 $("#btnSubmit").live("click",(function(e) {
    this.disabled = true;
    /Do Something /
  this.disabled = false;
return false;}));

C#

protected void btnSubmitClick(object sender, EventArgs e)
{
btnSubmit.Enabled = false;
/Do Something/
btnSubmit.Enabled = true;
}

Hope this helps

Many Thanks Anna

How to restrict user from submitting the form twice?

3 Answers3

Jquery

C#