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 Submi

Answer 1

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 2

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 3

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

Answer 4

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 5

in chrome use this:

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

Answer 6

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