ColdFusion in Context: Validating Checkboxes

It's easy to read text fields on the client's browser to confirm that the values they contain meet various specifications. However, suppose you want to confirm on the client's browser that a combination of checkboxes chosen by the user fits your requirements. You can't look for checkbox values values the same way you would read text boxes. This tip gives a method that works.

Checkbox Theory

Checkboxes usually come in groups, are identically named within those groups, and are read two different ways depending on whether you're on the client using javascript or on the server using ColdFusion. On the client, you refer to checkboxes in a group by position (starting with zero), and read the "checked" property instead of reading their values directly. On the server, the checked values for the entire group come in as a single, comma-delimited string.

Start with the End

To keep things simple, give the string a default value; then, display the string if it isn't zero length. Put all this code in checkbox.cfm. 

<pre>
<cfparam name="form.CustomerType" default="">
<cfif len(trim(form.CustomerType))>
  Here's the list of what you checked:
  <cfoutput>#form.CustomerType#</cfoutput>
</cfif>

Create Two Functions

Suppose you want to be sure that the user checked at least one box, and you don't want the user to be able to submit the page unless this is true. One function you'll need is something to check the boxes. Another function you'll need is something to consider if it's OK to submit the form.

For checking the boxes, you'll need to treat all the boxes in the group as an array and use an index to refer to a specific member of the array. (Remember that all the boxes in a single group have the same name; so, this treatment is necessary.) The "checked" property is either true or false (one hopes). The form to be used has two boxes in one group. The boxes are named CustomerType. If boxcheck finds that both boxes are empty, it returns "false". If it returns false, then the "consider" function, invoked when the user clicks a button on the form, fails to submit the form. Conversely, if one or both boxes are checked, clicking the button submits the form. 

<script>
function boxcheck()
{
if (document.demo.CustomerType[0].checked == false)
  {
  if (document.demo.CustomerType[1].checked == false)
    {
    alert('Please indicate if you are a consumer, producer, or both');
    return false;
    }
  }
return true;
}

function consider()
{
if (!boxcheck()) return false;
document.demo.submit();
return true;
}
</script>

Build the Form

Because we started with the end and worked backwards, the form is anti-climatic. It has a couple of checkboxes and a button that's used to consider submission of the form. 

<form name="demo" action="checkbox.cfm" method="post">
Please indicate your status:<br>
<input type="checkbox" name="CustomerType" value="Consumer">Consumer<br>
<input type="checkbox" name="CustomerType" value="Producer">Producer<br>
<input type="button" name="run" value="Submit" onClick="consider()">
</form>

Try it Out

Browse checkbox.cfm. Consider that radio buttons work in a similar fashion (in that they have to be read as part of an array on the client side). Then use this concept in your work. =Marty=