Disabling a submit button after one click

Question

Here's my code :

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'>
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'>
</form>

I want my onsubmit function to be executed and I want the page to be submited. In my website, no submit and no function

I've tried to duplicate it here, but the form seems to be posted and my function never gets executed ... http://jsfiddle.net/V7B3T/1/

And I don't know when I should reactivate the button.

Should I do it in the document.ready, or in the onSubmit function ?

So if someone can fixed the fiddle :) and after that I'll compare it with my code. I think :S I'm lost

Thanks all

Answer 1

If you want to validate the form or make any changes the before submitting and only submit if the form is valid you can do something like this:

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data">
    <input type="submit" name="send" id="send" value="Send" title="test">
</form>

and the JavaScript code:

$('#frm').bind('submit', function (e) {
    var button = $('#send');

    // Disable the submit button while evaluating if the form should be submitted
    button.prop('disabled', true);

    var valid = true;    

    // Do stuff (validations, etc) here and set
    // "valid" to false if the validation fails

    if (!valid) { 
        // Prevent form from submitting if validation failed
        e.preventDefault();

        // Reactivate the button if the form was not submitted
        button.prop('disabled', false);
    }
});

Here's a working fiddle.

Answer 2

I would definitely move that code to external JS (and CSS) files where it belongs, but this should work:

onclick="this.disabled=true;this.parentNode.submit();"

Since you're disabling the submit-button onclick it will be disabled once the actual form submission click takes place (onclick happens before that). Submitting the form with JS should do the trick though.

http://jsfiddle.net/V7B3T/4/

Edit: Regarding re-enabling the button, that would have to happen after your OnSubmit() function has run I guess.

Answer 3

If your form actually does a postback, you're effectively changing page, and therefore won't need to worry about re-enabling your button (that will happen once the page has loaded).

Also, since you're using jQuery, you may as well use it properly and separate out your HTML markup and Javascript by attaching event handlers using the jQuery functions, and not onclick, onsubmit, etc attributes on HTML elements.

Updated HTML:

<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'>
    <input type='submit' name='send' id='send' value='Send' title='test'>
</form>

Updated Javascript:

function submitForm(form) {
    alert("submitted");
}

$('#send').click(function(e) {
    this.disabled = true;
});

$('#frm').submit(function(e) {
    submitForm(this);    
});

Working jsFiddle

You'll need to wrap that in a $(document).ready(function() {...}); call for use on an actual page - I left it out because jsFiddle executes any provided Javascript onLoad anyway.