What is the best approach for (client-side) disabling of a submit button?

问题

Details:

Only disable after user clicks the submit button, but before the posting back to the server
ASP.NET Webforms (.NET 1.1)
Prefer jQuery (if any library at all)
Must be enabled if form reloads (i.e. credit card failed)

This isn't a necessity that I do this, but if there is a simple way to do it without having to change too much, I'll do it. (i.e. if there isn't a simple solution, I probably won't do it, so don't worry about digging too deep)

回答1:

For all submit buttons, via JQuery, it'd be:

$('input[type=submit]').click(function() { this.disabled = true; });

Or it might be more useful to do so on form submission:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

But I think we could give a better answer to your question if we knew a bit more about the context.

If this is an ajax request, then you'll need to make sure you enable submit buttons again on either success or failure.

If this is a standard HTTP form submission (aside from disabling the button with javascript) and you're doing this to safe guard from multiple submissions of the same form, then you ought to have some sort of control in the code that deals with the submitted data, because disabling a button with javascript might not prevent multiple submissions.

回答2:

You could do something like this:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Benefits of this:

It will work with all your forms, with all methods of submission:
- clicking a submit element
- pressing enter, or
- calling form.submit() from some other code
It will disable all submit elements:
- <input type="submit"/>
- <button type="submit"></button>
- <input type="image" />
it's really short.

回答3:

I'm guessing that you don't want them to hit the submit button more than once while the submit is processing.

My approach has been to just hide the button entirely and display some sort of status indicator (animated gif, etc) instead.

Here's a very contrived example (it's technically in prototype but I think a jquery version would be very similar):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

回答4:

in JQuery:

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

回答5:

On thing to be aware of is that you should not disable the button before the form is submitted. If you disable the button using javascript in the OnClick event you may lose the form submit.

So I would suggest you hide the button using javascript by placing an image above it or by moving the button out of the visible range. That should allow the form submit to proceed normally.

回答6:

There are three ways to submit a form that should be covered. Use both David McLaughlin's and Jimmy's suggestions. One will disable the submit button form element while the other disables the basic HTML form submit.

For the third, these won't disable Javascript from doing a form.submit(). The OnSubmit="return false" method only applies when a user clicks the submit button or presses Enter in a input form element. Client side scripting will need to be handled as well.

回答7:

How about

Code behind:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

This doesnt solve the problem of what happens if the postback times out, but other than that it worked for me.

来源：https://stackoverflow.com/questions/46079/what-is-the-best-approach-for-client-side-disabling-of-a-submit-button

标签

ASP.NET

javascript

jquery

webforms

.net-1.1