Share and Enjoy !

Recently I needed to disable a SharePoint Form’s Submit button until a checkbox on the form was checked. Sounds pretty simple and straightforward, doesn’t it? Well, here’s a little description of why it was NOT so easy for me to do this. The form required a user to indicate that they understood what they were submitting in a form, a sort of consent checkbox, by checking a check box which toggled the Submit button’s Disabled property. And finally, the initial state of the SaveButton should be disabled.

You might be saying (in your best Fletch voice),

“Awww, come on Pete, it’s so simple. Maybe you need a refresher course?”

Just set Disabled on the button control to false, add some JavaScript to toggle the Enabled property when the user checks or unchecks the CheckBox control. Silly me, I thought the same thing. I’ll just disable the underlying Button control using the TemplateContainer.FindControl to find the Button control and set the Disabled property to true. Well, apparently the “ASP.NET runtime will not recognize a post back initiated by a disabled button“. So, my first attempt at simply disabling the Button control in the SaveButton template failed miserably. The JavaScript to control the toggle worked great, but the Submit button, being disabled when rendered, would never submit, even when Disabled was false on the client.

The short answer to the problem, which took me a little longer to figure out, is to use Page.ClientScript.RegisterClientScriptBlock to register a script that will run when the page is loaded and set Button.Disabled to true. The trick here is that SharePoint registers it’s _spBodyOnLoadWrapper function, found in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\INIT.JS, to load scripts added to the _spBodyOnLoadFunctionNames array. Once your code loads a function into the _spBodyOnLoadFunctionNames and the page starts to load, the page onload event is handled by SharePoint’s _spBodyOnLoadWrapper function which then calls the list of functions listed in the _spBodyOnLoadFunctionNames array.

To solve my problem, I simply had to create a script which would be called when the check box was checked or unchecked, and add that same function to the _spBodyOnLoadFunctionNames array to be called when the page onload event was handled by SharePoint. Here they are.

string CONSENT_SCRIPT_BLOCK = @"function validateConsentChecked(checkBoxID,
submitButtonID)\\

 

{
var consentCheckBox = document.getElementById(checkBoxID);
var submitButton = document.getElementById(submitButtonID);
submitButton.disabled = !consentCheckBox.checked;
}

 

string DISABLE_SUBMIT_SCRIPT_BLOCK = "_spBodyOnLoadFunctionNames.push(\"validateConsentChecked('{0}','{1}')\")";

To register the function itself, I used the following code:

Page.ClientScript.RegisterStartupScript(this.GetType(), "ValidateSubmission",
CONSENT_SCRIPT_BLOCK, true);

And to register the onload function call, I used this code:

\\
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DisableSubmitButton",
string.Format(DISABLE_SUBMIT_SCRIPT_BLOCK, checkBoxID, submitButtonID), true);
\\

Hopefully this will help someone else out in the future and save you some time. If anyone has a different way to handle this problem, let me know. I am more than willing to do away with writing JavaScript if I don’t have to.

Share and Enjoy !

Related Content: