Details:
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)
in JQuery:
$('#SubmitButtonID').click(function() { this.disabled = true; });
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.
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.
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>
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.
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.
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:
form.submit() from some other code<input type="submit"/><button type="submit"></button><input type="image" />