This is a recurring question on many forums, and I have a working solution, but it is ugly.
I need to disable buttons after a click to prevent double-submission of a form. I do this by changing the css class, which will disable and dim the image.
Because the JavaScript consists of both litteral and generated parts, and I am mixing client-side ids and server side code, I ended up with 3 functions that do the same. Is there a way I can just have one function that works for all 3 buttons?
<asp:ImageButton ID="btnSubmit" runat="server"
OnClientClick="doSubmitAndDisable();" OnClick="btnSubmit_Click"/>
<asp:ImageButton ID="btnSubmitMore" runat="server"
OnClientClick="doSubmitNextAndDisable();" OnClick="btnSubmitMore_Click"/>
<asp:ImageButton ID="btnSubmitNext" runat="server"
OnClientClick="doSubmitMoreAndDisable();" OnClick="btnSubmitNext_Click"/>
<script type="text/javascript">
function doSubmitAndDisable() {
if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false){
return false;
}
document.all.<%= btnSubmit.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitNext.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitMore.ClientID%>.className = 'disabled';
<%= ClientScript.GetPostBackEventReference(btnSubmit, string.Empty) %>;
}
function doSubmitNextAndDisable() {
if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false){
return false;
}
document.all.<%= btnSubmit.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitNext.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitMore.ClientID%>.className = 'disabled';
<%= ClientScript.GetPostBackEventReference(btnSubmitNext, string.Empty) %>;
}
function doSubmitMoreAndDisable() {
if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false){
return false;
}
document.all.<%= btnSubmit.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitNext.ClientID%>.className = 'disabled';
document.all.<%= btnSubmitMore.ClientID%>.className = 'disabled';
<%= ClientScript.GetPostBackEventReference(btnSubmitMore, string.Empty) %>;
}
</script>
Rather than generate portions of your javascript, write javascript functions that can take in the IDs as parameters or something.
Consider writing an init function, in which you can set your IDs and anything else you may need as variables. From the page, you can call the init function and pass in all the server generated IDs.
This will give you Javascript that is more solid, and you can also end up moving it to a separate file, allowing you to utilize client side caching.