How to submit form only once after multiple clicking on submit?

Question

I am having problem that when i am trying to submit the form by clicking on the submit button it takes some time to post request during this if i am again click on the Submit button it will again send the all parameters and parametrs get saved twice, thrice ....so on.

I don't know how to limit the the submit button so that form shouldn't get submitted twice. I think when i cliked on submit i have to disable submit button so that user can't click it again, is it right approach to doing this?

Answer 1

Disabling the button is one solution, but potentially poses a problem for keyboard users who just hit enter to submit a form. In this scenario, the button won't be disabled. The sure-fire method would be to handle the onsubmit event like so:

(function () {
    var allowSubmit = true;
    frm.onsubmit = function () {
       if (allowSubmit)
           allowSubmit = false;
       else 
           return false;
    }
})();

(well, as sure-fire as you can get with JS enabled anyway). You could disabled the button as a visual confirmation to the end user that the form can only be submit once too.

Answer 2

<input type="submit" onclick="this.disabled = true" value="Save"/>