Imagine a situation where you have a search form, with different search options based on different categories (such as Search all, news, weather, entertainment, etc…). Now when you submit your form you won’t users to either select the Search All option or the different categories, but not both (i.e. the form is to be cleared of all the different categories if Search All is selected and vice versa when you select a different category the Search All option is to be cleared). In the following I will talk you through a script I wrote to achieve just that effect.

Let’s start off with the actual form:

<form name=”example” action=”<your destination page>”>
<input type=”Checkbox” name=”test” onclick=”javascript:SetOther()” checked> Search All
<input type=”Checkbox” name=”test2” onclick=”javascript:SetAll()”> News
<input type=”Checkbox” name=”test2” onclick=”javascript:SetAll()”> Weather
<input type=”Checkbox” name=”test2” onclick=”javascript:SetAll()”> Entertainment
<input type=”Checkbox” name=”test2” onclick=”javascript:SetAll()”> Music
<input type=”Submit” value=”Search”>
</form>

For the script to work it is very important to give the form a name so that the JS can reference the script. Else there is nothing special about the <Form> tag. The checkboxes contain all onclick event handlers and they call different functions (to carry out different actions, more on that when we review the script). Also note that the different categories checkboxes have the same name. The final component is the search button.

Now let’s look at the script:

<SCRIPT LANGUAGE=”JavaScript”>
<!– hide script from older browsers
function SetAll() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   var i = 0;
   for(i = 0; i<len; i++) {
      if (dml.elements[i].name == ‘test2’) {
         dml.test.checked = val;
      }
   }
}
function SetOther() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   var i = 0;
   for(i = 0; i<len; i++) {
      if (dml.elements[i].name == ‘test2’) {
         dml.elements[i].checked = val;
      }
   }
}
–>
</script>

Right let’s take a look at the first function, called SetAll. This functions controls the behaviour of the Search All checkbox, i.e. if the any of the different categories checkboxes are ticked remove the check for Search All checkbox. On the first three lines of that function I set a bunch of variables to make the coding easier (i.e. shorter). The variable dml stores the form name, len stores the number of elements elements (checkboxes) of said form, val is set 0 and I also set i to 0. Next I looped (for statement) over the number of elements, checking which elements named test2 are checked (if statement). Now you can see why I gave the form elements for different categories the same name, because the behaviour dictated that if any of the different categories is checked the script was to remove the check from Search All. The statement between the if clause does exactly that, it sets for element test to val, which is 0.

The second function displays a similar behaviour. The difference is that when the Search All checkbox is ticked, the tick in all the other categories is removed. I hope all this made sense and that you found it useful, so until the next time!!