Test Radio Button Form Values
10
20
30
40

Things in BLUE text are required for the form.

Things in GREEN text are "comments" that are not used in the code, except for the JavaScript.

Things in RED text are the variables you can change.

You may copy the code below and use it for your form, changing the variables as necessary.

<html>
<!-- ///////////////////////////////////////////////////////
Tutorial Created by the UWP Web Development Team
Visit the Web Training Center
http://www.uwplatt.edu/web/wtc/
/////////////////////////////////////////////////////// -->
<head>
<title>Radio Button Functionality</title>
<script type="text/javascript">
<!-- Start Hide
function getValue()
{
//////////////////////////////////////////////////////////////
// The variable 'msg' will hold the messages we want to
// appear in the message box. The 'check' varable, which
// we are setting to zero, will check to see if any values
// have been selected.
//////////////////////////////////////////////////////////////
var msg = "";
var check = 0;

//////////////////////////////////////////////////////////////
// We create a for loop that tests each radio box in turn,
// checking their values. The value is inserted into the
// 'msg' variable along with a message. We also set the value
// of 'check' to 1, if any values were selected.
//////////////////////////////////////////////////////////////
for (var i = 0; i < 4; i++)
{
   var checked = document.testForm.test[i].checked;
   if (checked)
   {
      msg += "The selected value is: " + (document.testForm.test[i].value) + "\n";
      check = 1;
   }
}

//////////////////////////////////////////////////////////////
// If the check value is equivalent to one, we alert the
// message constructed above. If it is not equal to one,
// we alert that no value was selected.
//////////////////////////////////////////////////////////////
if (check == 1)
{
   alert (msg);
}
else
{
   alert ("No value was selected.");
}
}

// End Hide -->
</script>

</head>
<body>

<div class="tableLight" style="width:35%;margin:0 auto;padding:0.5em;border:0.2em solid #000;">
   <strong>Test Radio Button Form Values</strong>
   <form name="testForm" action="">
      <input type="radio" name="test" value="10" />10<br />
      <input type="radio" name="test" value="20" />20<br />
      <input type="radio" name="test" value="30" />30<br />
      <input type="radio" name="test" value="40" />40<br />

//////////////////////////////////////////////////////////////
// We add an onclick action to the Check Values button
// that calls the function we created above, getValue().
//////////////////////////////////////////////////////////////

      <input type="submit" value="Check Values" onclick="javascript:getValue();" />
      <input type="reset" value="Reset" />
   </form>
</div>

</body>
</html>