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"/>

Answer 3

in chrome use this:

<input type="submit" onclick="this.form.submit();this.disabled = true;" value="Save"/>

Answer 4

I love the simplicity and directness of Zoidberg's answer.

But if you want to hook up that handler using code rather than markup (some people prefer to keep markup and code completely separated), here it is using Prototype:

document.observe('dom:loaded', pageLoad);
function pageLoad() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', disableOnClick);
}
function disableOnClick() {
    this.disabled = true;
}

or you could use anonymous functions (I'm not a fan of them):

document.observe('dom:loaded', function() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', function() {
        this.disabled = true;
    });
});

Doing it using jQuery will look very similar.

Answer 5

I know this is old, but rather than disable, just hide the button, you can't click what you can't see.

<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/>

Answer 6

if you are use form submit / post in PHP then use this code

onclick="disableMe();" in type="submit" 

its submit button code

<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />

Answer 7

Best way I found this to work best is if all information is correct on the form then add the attribute to the submit button. Incase user needs to comeback and fill out form again with correct information.

document.querySelector('.btn').addEventListener('submit',function(){
    if(input.value){
        this.setAttribute("disabled", "true")
    }
};

Answer 8

You can add the next script to your 'layout page' (to be rendered on all the pages globally).

<script type="text/javascript">
    $(document).ready(function () {
        $(':submit').removeAttr('disabled'); //re-enable on document ready
    });
    $('form').submit(function () {
        $(':submit').attr('disabled', 'disabled'); //disable on any form submit
    });
</script>

Then, each time a form is submited, the submit buttons are disabled. (The submit button(s) are re-enabled when loading the page.)

If you are using a validation framework (like jQuery Validation), it is probably that you need to re-enable the submit button(s) when a validation fails also. (because the form validation failure makes that the submit be canceled).

If you are using jQuery Validation, you can detect the form invalidation (form submition cancellation) adding this:

$('form').bind('invalid-form.validate', function () {
    $(':submit').removeAttr('disabled'); //re-enable on form invalidation
});

Then if a form validation fails, the submit button(s) is/are enabled again.

Answer 9

One solution is to not use an <input> as the submit button, but instead a <div> (or <span>) styled as a button, having an onclick attribute:

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick="submitOnce()">
    Submit
  </div>
</form>

And the submitOnce function would first remove the onclick attribute and then submit the form:

function submitOnce() {
  document.getElementById('submit-button').removeAttribute('onclick');
  document.getElementById('my-form').submit();
}

Answer 10

you can use this .once() method to call once that function:

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick.once="submitOnce()">
    Submit
  </div>
</form>