Submitting Forms with Unselected Checkboxes

Submitting Forms with Unselected Checkboxes

Checkbox control is one of the widely used controls in Web pages. However, it is important to understand that a name/value pair for the checkbox is only submitted with the form when checkbox element is selected (on). If a checkbox is not selected, then the element is not posted to the server with the Form’s submit. As a result, problems may arise since the unselected checkbox is never submitted; your server-side script might not find the checkbox control in the posted name/value pairs. The problem is prominent when your server-side script is updating only the posted values.

If you want to submit an unselected (off) checkbox control with a Form, you may need to write some client-side script to handle this as a workaround. I generally create a hidden type input element and then change its value accordingly by using a JavaScript function. This way, at the server-side, I always know if the user has selected or unselected the checkbox.

This is the JavaScript function to populate the hidden control depending on the checkbox value. Here, ‘frmName’ is the name of the form:

 function ToggleCheckBox(pThis,strControlName) { var oForm = document.forms['frmName']; if (pThis.checked == true) { oForm.elements[strControlName].value='Yes'; } else { oForm.elements[strControlName].value='No'; } } 

These are the checkbox and hidden input controls:

 Checked onclick="javascript:ToggleCheckBox(this,'fldPq');"> 

Note:GetCheckValue method is a server-side function to retrieve the previously saved checkbox values.


Share the Post: