Submitting form through Ajax

Question

My issue is simple -

I am submitting form using jquery and ajax . When the button is clicked the data is submitted to database .

Question - If the user clicks the submit twice there are two entries in the database . how can I solve this ?

I cannot use .one() because the submit button invokes validation function if the errors happen the data will not be submitted .So , user has to call the same function again .

Obviously I can do that with a variable on .success .but what is the best solution to this issue .

Thanks for the help.

Answer 1

Overlaying to prevent click is one way.

If you want something plug and play blockUI.js is good. All you need is

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

or you can just use .ajaxstart() and .ajaxstop( ) to overlay an element yourself to enable and disable the submit button.

Answer 2

You can disable the submit button once you have submitted the form. Any form can be submitted only using the Submit button. So:

$(form).submit(function () {
  $(this).find("input:submit").prop("disabled", true);
  // You can enable it back once the AJAX request is successful.
  $.ajaxSuccess(function () {
    $(form).find("input:submit").prop("disabled", false);
  });
});