To use it simply embed or include it into your template

Eventhough the article says this is a IE specific event/feature it also works in FireFox. You should be aware that whenever the user leaves the page, they will be prompted about their impeding data loss, which can get a little tedious while developing.

Again this became a handy feature for our AJAX apps as most of the processing is done in the background without the page reload, a user could accidentally hit the back button and loose where they were at.

From the looks of it, it's an IE only thing, but I wonder what the advantages are of using this code over a regular browser check? Is this a more reliable way than using window.ActiveXObject and, if you are specifically playing around with xmlHttpRequest, based on that condition making the correct create object call?

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!!