Test Multiple Select Form Values

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>Multiple Select 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.
//////////////////////////////////////////////////////////////
var msg = "";

//////////////////////////////////////////////////////////////
// checkSum will keep track of the sums of all fields selected
//////////////////////////////////////////////////////////////
var checkSum = 0;

//////////////////////////////////////////////////////////////
// The variables test1-4 will check if each field is selected
//////////////////////////////////////////////////////////////
var test1 = document.testForm.test.options[0];
var test2 = document.testForm.test.options[1];
var test3 = document.testForm.test.options[2];
var test4 = document.testForm.test.options[3];

//////////////////////////////////////////////////////////////
// If test1 is selected, we will add the value to msg to appear
// in the alert box, and add the value to checkSum. If it is not
// selected, we add 'Not Selected' to the msg. This is repeated
// for all of the fields.
//////////////////////////////////////////////////////////////
if (document.testForm.test.options[0].selected == true)
{
   msg += "Test 1: " + (document.testForm.test[0].value) + "\n";
   checkSum += parseFloat(document.testForm.test[0].value);
}
else
{
   msg += "Test 1: Not Selected.\n";
}
if (document.testForm.test.options[1].selected == true)
{
   msg += "Test 2: " + (document.testForm.test[1].value) + "\n";
   checkSum += parseFloat(document.testForm.test[1].value);
}
else
{
   msg += "Test 2: Not Selected.\n";
}
if (document.testForm.test.options[2].selected == true)
{
   msg += "Test 3: " + (document.testForm.test[2].value) + "\n";
   checkSum += parseFloat(document.testForm.test[2].value);
}
else
{
   msg += "Test 3: Not Selected.\n";
}
if (document.testForm.test.options[3].selected == true)
{
   msg += "Test 4: " + (document.testForm.test[3].value) + "\n";
   checkSum += parseFloat(document.testForm.test[3].value);
}
else
{
   msg += "Test 4: Not Selected.\n";
}

//////////////////////////////////////////////////////////////
// Finally, we print out the sum of all the checked fields in
// an alert box.
//////////////////////////////////////////////////////////////
msg += "Total of Selected: " + checkSum;
alert (msg);
}
// End Hide -->
 </script>

</head>
<body>

<div class="tableLight" style="width:40%;margin:0 auto;padding:0.5em;border:0.2em solid #000;">
   <strong>Test Multiple Select Form Values</strong>
   <form name="testForm" action="">
      <select multiple="multiple" name="test">
         <option value="10">10</option>
         <option value="20">20</option>
         <option value="30">30</option>
         <option value="40">40</option>
      </select><br />
      <input type="submit" value="Check Values" onclick="javascript:getValue();" />
      <input type="reset" value="Reset" />
   </form>
</div>

</body>
</html>