I have an emerce website that uses jQuery 1.9.1 and Bootstrap 2.3.2

I'd like to prevent customers from double-submitting orders on accident (hitting submit twice).

Any ideas on how to do this?

My input submit is simply:

 <input type="submit" class="btn btn-orange pull-right" value="Place Order">

Is there anything I can do to prevent this from occurring? I don't want to hinder other customers, I just don't want folks to submit, wait, get impatient, submit again, and they are double charged for their order. That's sloppy.

Thanks.

I have an emerce website that uses jQuery 1.9.1 and Bootstrap 2.3.2

I'd like to prevent customers from double-submitting orders on accident (hitting submit twice).

Any ideas on how to do this?

My input submit is simply:

 <input type="submit" class="btn btn-orange pull-right" value="Place Order">

Is there anything I can do to prevent this from occurring? I don't want to hinder other customers, I just don't want folks to submit, wait, get impatient, submit again, and they are double charged for their order. That's sloppy.

Thanks.

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited Feb 20, 2014 at 17:02 Sachin Jain 21.9k3434 gold badges110110 silver badges176176 bronze badges asked Feb 20, 2014 at 16:51 user1879703user1879703 24111 gold badge66 silver badges1515 bronze badges 1

• 1 remove the submit button on submit. Prevent further submissions via the submit event after it happens once. – Kevin B Commented Feb 20, 2014 at 16:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Here is a little trick:

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onClick="this.disabled=1">

Disable the button when form is submitted. You can do something like this:

$('.pull-right').click(function() {
  // Code to submit the form
  $(this).attr('disabled', true);
});

This SO Question might help How-to-prevent-calling-of-en-event-handler-twice-on-fast-clicks

You can do it like this:

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="$(this).attr('disabled', true);">

Some times you may want to also run a function like: OnSubmit function (or a validation) you can do this:

<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="this.disabled=true;OnSubmit(this.parentNode);" />