HTA Application ~ Javascript & Checkboxes for HTML Form

Here we're going to add 2 checkboxes and use them both in different ways. The first checkbox will be data information supplied by the user, the value of which will be determined in GetFormData when the Start button's clicked. The other checkbox will make some immediate change. Here we're just going to present it's value in a message. In the next tutorial, Show/Hide Layers, we'll use that same checkbox to show or hide a section of our form.

Checkbox - User data

Adding again to simple.hta, paste the following somewhere between the Male/Female radio buttons and the Start button. When Start is clicked, we'll find out if the box is checked or not and add it's result to our final message. As previously, you can right-click on this page to show source, then replace the table formatted form with simple.hta's form.

<input type="checkbox" id="chkUnderstand" />I understand this tutorial

In the following code that tests the value of our checkbox, you'll notice that we're setting the value of a new global variable. Add boolUnderstand to the global variable list and add the following if statement to the GetFormData function. Just beneath that is our updated RunScript function.

if(document.getElementById('chkUnderstand').checked) {
   boolUnderstand = true;
} else {
   boolUnderstand = false;
}

function RunScript() { // do something
   var strMsg, strUnder;
   if(boolUnderstand) {
     strUnder = 'I understand this tuturial.';
   } else {
     strUnder = 'I don\'t get what you\'re trying to say here.';
   }
   strMsg = 'Name: '+strName+'\nAddress: '+strAddr+'\nCity: '+strCity+'\n'+strMaleFem+'\n'+strUnder;
   alert(strMsg);
}

Adding a data checkbox is that simple; checkbox, code to test it, using it's value. What I've done in RunScript may seem convoluted when I could have added strUnder to GetFormData. In a small app that would be fine, but if you have a large form with many fields, it's best to build it logically. All I want to do in GetFormData is "get form data".

In RunScript, I've created a local variable strUnder. I'm using boolUnderstand to determine what strUnder outputs in our resulting message. Note: This article assumes you know basic HTML and Javascript. If you don't understand the use of backslashes here, look up "javascript escape characters".

Checkbox - Immediate update

We're adding the onclick event to the next checkbox so we can make something happen immediately. When the box is clicked, we can change the appearance of the form, or set a variable, or both. In the next tutorial, when the box is checked, we'll show 2 new textboxes for shipping address, and hide them when the box is unchecked. For now, we'll just present a message. Add the following beneath the checkboxes:

<input type="checkbox" id="chkShipping" onclick="setOptionShipping();" />Shipping address is different

Add the following function to the end of our function list:

function setOptionShipping() {
   if(document.getElementById('chkShipping').checked) {
     alert('When the checkbox is checked,\nwe can do something.');
   } else {
     alert('When the checkbox is not checked,\nwe can do something else.');
   }
}

Our updated form