JavaScript and Forms



Getting and Setting input text field values

A function to check the length of a student username

<!doctype html>
<html lang="en">
  <head>
    <script>
    function checkUserName( form ) {
       if ( form.reg.value.length != 8 ) {
          alert( "You have not entered an eight character string" );
          return false;
       } else {
          alert( "This is correct" );
          return true;
       }
    }
    </script>
  </head>
  <body>
   <p> Please enter your student username: <input type="text" name="reg" />
   <input type="button" onclick="checkUserName(form);" value="check validity"/> 
  </body>
</html>
Example 1 Built in class







Functions and Forms - Radio buttons

Get the currently selected radio button value from a radio array.

getRadioValue is passed a reference to a radio button array and returns the value of the radio button that is checked or returns a null string. This is only useful if each radio button has a value defined for it in the html tag that creates the radio button.

Example

<input type="radio" name="r" value="y">
<input type="radio" name="r" value="z">

function getRadioValue( radioArray ) {
   for ( let i = 0; i < radioArray.length; i++ ) {
      if ( radioArray[ i ].checked ) { 
         return radioArray[ i ].value;
      }
   }
   return "";
}


Functions and Forms - Checkboxes

Get an array with the Checked Values

getCheckValuesA is passed a reference to a checkbox array. Since no checkbox, one checkbox, or several checkboxes may be checked this function returns an array of the values of the checked boxes. If none are checked, the array has a length of zero. This is only useful if each checkbox has a value defined for it in the html tag that creates the checkbox button.

Example

<input type="checkbox" name="c" value="y">
<input type="checkbox" name="c" value="z">
function getCheckValuesA( checkBoxArray ) {
   const values = [];
   for ( let i = 0; i < checkBoxArray.length; i++ ) {
      if ( checkBoxArray[ i ].checked ) {
          values[ values.length ] = checkBoxArray[ i ].value;
      }
   }
   return values;
}

Get a String with the Checked Values

getCheckValuesS is passed a reference to a check box array. Since no checkbox, one checkbox, or several checkboxes may be checked this function returns a string of the values of the checked boxes separated by the value passed in the separator parameter. If none are checked, the string will be empty. This is only useful if each checkbox has a value defined for it in the html tag that creates the checkbox button.

Example

function getCheckValuesS( checkBoxArray, separator ) {
   let tempString = "";
   let count = 0;
   for ( let i = 0; i < checkBoxArray.length; i++ ) {
      if (checkBoxArray[ i ].checked) {
         if ( count > 0 ) { 
            tempString += separator;   //don't put the separator 
                                       //before the first value
         }
         tempString += checkBoxArray[ i ].value;
         count++;
      }
   }
   return tempString;
}


Functions and Forms - Select

Get the Selected Value

getSelectedValue returns the value of the currently selected option in a single item select list. For this to work the value of the option items must be set. For example the function would return "x" or "y" here:

<select name="s">
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getSelectedValue( selectList ) {
  return selectList[ selectList.selectedIndex ].value;
}

Get the Selected Text

getSelectedText returns the text of the currently selected option in a single item selection list. In the example below either "the variable x" or "the variable y" would be returned.

<select name="s">
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getSelectedText( selectList ) {
   return selectList.options[ selectList.selectedIndex ].text;
}


Functions and Forms - Select Multiple

Get an array of Selected Values

The function getMSelectValuesA( selectList ) receives a reference to a multiple selection list and returns an array of the values selected in the list. In the HTML selection list below, depending on the options selected, this function would return an empty array (if no items were selected) or the values "x" and or "y". Note: for this to work the VALUE attribute of the option tag must be used.

<select name="s" multiple>
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getMSelectValuesA( selectList ) {
   const values = [];
   for ( let i = 0; i < selectList.length; i++ ) {
      if ( selectList.options[ i ].selected ) {
         values[ values.length ] = selectList.options[ i ].value;
      }
   }
   return values;
}

Get the Selected Value

The function getMSelectValuesS( selectList, separator ) receives a reference to a multiple selection list and returns string of the values selected in the list. Each value is separated by the character or string passed in the separator parameter. In the HTML selection list below, depending on the options selected, this function would return an empty string (if no items were selected) or the values "x" and or "y". Note: for this to work the VALUE attribute of the option tag must be used.

<select name="s" multiple>
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getMSelectValuesS( selectList, separator ) {
   let count = 0;
   let tempString = "";
   
   for ( let i = 0; i < selectList.length; i++ ) {
      if ( selectList.options[ i ].selected ) {
         if ( count > 0 ) {
            tempString += separator;
         }
         tempString += selectList.options[i].value;
         count++;
      }
   }
   return tempString;
}

Get an Array of the Selected Text

The function getMSelectTextA( selectList ) receives a reference to a multiple selection list and returns a array of the text selected in the list. In the HTML selection list below, depending on the options selected, this function would return an empty array (if no items were selected) or the values "the variable x" and or "the variable y". Note: for this to work the VALUE attribute of the option tag is NOT required as the option text is returned.

<select name="s" multiple>
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getMSelectTextA( selectList ) {
   const values = [];
   for ( let i = 0; i < selectList.length; i++ ) {
      if ( selectList.options[ i ].selected ) {
         values[ values.length ] = selectList.options[ i ].text;
      }
   }
   return values;
}

Get a String of the Selected Text

The function getMSelectTextS(selectList, separator) receives a reference to a multiple selection list and returns a string of the text selected in the list. Each value is separated by the character or string passed in the separator parameter. In the HTML selection list below, depending on the options selected, this function would return an empty string (if no items were selected) or the values "the variable x" and or "the variable y". Note: for this to work the VALUE attribute of the option tag is NOT required as the option text is returned.

<select name="s" multiple>
  <option value="x">the variable x</option>
  <option value="y">the variable y</option>
<select>

Example

function getMSelectTextS( selectList, separator ) {
   let count = 0;
   let tempString = "";
   for ( let i = 0; i < selectList.length; i++ ) {
      if ( selectList.options[ i ].selected ) {
         if ( count > 0 ) {
            tempString += separator;
         }
         tempString += selectList.options[ i ].text;
         count++;
      }
   }
   return tempString;
}