I recently ran into a case where I was required to have both a client side validation and a server side event running on a checkbox control on a quick form. On quickforms I normally inject a client side validation onto a control by using the control’s Attributes.Add. In the case of the SLXCheckBox control, which is based on the standard ASP.Net Checkbox control, once I added my onClick client side event the server side code would no longer function. After spending some time trying to figure out why this was the case I finally determined that when the checkbox is rendered in the browsers DOM, it wires up the server side event by using the HTML control’s onClick event, like so:
onClick=javascript:setTimeout(‘__doPostBack(‘ctl00$DialogWorkspace$QuickFormName$ControlName’,”)’, 0)
The code that I was using on my custom client event was attempting to return a true or false based on a client prompt like so:
return confirm(‘Are you sure you wanted to check this?’);
Therefore I was attempting to set the controls click event like this:
Control.Attributes.Add(“onClick”, “return confirm(‘Are you sure you wanted to check this’”);
When the checkbox control was rendered on the browser page it looked something like this:
onClick=”return confirm(‘Are you sure you wanted to check this’);setTimeout(‘__doPostBack(‘ctl00$DialogWorkspace$QuickFormName$ControlName’,”)’, 0)
Because it reached the return before ever reaching the standard postback portion of the onClick, the server code would never run.
To get around this I simply made my client validation a function and only returned if the user canceled out of the dialog. Something like this:
string ClientScript = “function checkReturn() { “;
ClientScript += ” return confirm(‘Are you sure you wanted to click this?’); }”;ScriptManager.RegisterStartupScript(Page, GetType(), “FXCheckReturn”, ClientScript, true);
Control.Attributes.Add(“onClick”, “if(!checkReturn()) return;”);
By forming the code like this, the rendered onClick event only returns if the user cancels my dialog. If they do not cancel it, then the code proceeds to the normal postback event, running the server code.
