Mixing server & client controls, event handling

Question

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>    

Answer 1

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.

Answer 2

Hey,

I agree, use methods to help reduce the code, or structure it with a JavaScript class that can accept a collection of buttons and process them accordingly.

If you are looking for the automatic ability that on click a button is disabled, I have a framework I created that has a button, which you can set a property DisableOnClick that disables the button once they click it, and if you need it can even make it available again after X milliseconds. It's at http://nucleo.codeplex.com. shameless plug I know, I know :-)

HTH.