HTA Application ~ Javascript & Radio buttons for HTML Form

Of all form elements, the radio button is the most complicated. Radio buttons can be used to collect data when the Submit button is clicked, or immediately modify the appearance of the form or update the value of a global variable. Searching on "javascript radio button" will bring up many discussions on the best way to find the selected radio button's value.

A group of radio buttons share the same name which creates the group relationship. To find the value of the selected radio button, you would first need to find the selected button, then get it's value. You could use if/else structures, but it would be impractical if there were more than two. It's best to use the for structure for all size radio button groups.

Radio button - one preferred method

Shown above is an example form with several radio buttons using the following to get the selected radio button's value. (We'll be using a different method and won't be adding this to simple.hta.)

function ShowTheColor() {
   var theColor;
   for (i=0; i<document.colorform.radColor.length; i++) { // iterates thru all radio buttons
     if (document.colorform.radColor[i].checked==true) { // finds the selected button
       theColor = document.colorform.radColor[i].value; // assigns value
     }
   }
   alert('You selected '+theColor);
}

<input type="radio" name="radColor" value="Red" checked="checked" />Red
  ... (and so on for Orange, Yellow, Green, Blue, Purple) ...
<input type="radio" name="radColor" value="Brown" />Brown
<input type="button" id="ShowColor" value="Show Color" onclick="ShowTheColor()" />

Notice that the radio buttons share the same name="radColor" and the onclick event is in the button.

Radio button - Immediate update

Add the following 2 buttons into our existing form just beneath the City textbox:
Male <input type="radio" name="optMaleFem" onclick="setMaleFem('male')" /><br />
Female <input type="radio" name="optMaleFem" onclick="setMaleFem('female')" /> (required)

Add strMaleFem to the global variable list because we'd like to test it's value in Validate and use it in RunScript. Create a new line under the global variable list that assigns an empty string to strMaleFem.
    strMaleFem = '';
Because we're updating strMaleFem as soon as the radio button is clicked, there no need to do anything in GetFormData. Add the following function to the end of our Javascript section:

function setMaleFem(val) {
   strMaleFem = val;
}

We didn't give our radio button group (optMaleFem) a default button, as we did above in the color form where Red was the default color. It's possible that someone may not click Male or Female, either intentionally or unintentionally. We could add the following to Validate to make it required:

if(strMaleFem=='') {  // neither button was clicked if our value is empty
   alert('Please choose Male or Female'); return false;
}

Update the following line within the RunScript function to use the new variable:
strMsg = 'Name: '+strName+'\nAddress: '+strAddr+'\nCity: '+strCity+'\n'+strMaleFem;

Test the form first without clicking Male or Female to bring up the Validation prompt.

Our updated form