The Geekiest One
Jul 8 · 8 min read

Getting and Setting input text field values

A function to check the length of a student username

<html>
<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>

This form contains an input text field and an input button. The form is designed to demonstrate how to get and set the text in a text field. The HTML for the input button includes an event handler attribute. pressing the button calls a function that:

  • retrieves the value in the text field
  • displays the text in an alert dialogue box
  • clears the text field by setting its value to an empty string: “”

Getting and setting the text in an input text field is done by using the value property of the input field. For example, if there is a form named test and an input field named firstName then the text in the field can be accessed like this:

result = document.test.firstName.value

Similarly, text can be placed in the field this way:

document.test.firstName.value = “Hello World!”

It is unusual to see this form in a function designed to perform some operation with a form. Most often a reference to a form object, an input object, or a text value is passed to a function from the event handler that calls it. This is what happens in this example. A function is called by theonClick="" handler in the input button tag:

onClick=”showAndClearField(this.form)”

The keyword this refers to the input tag. For convenience, each input object has a property named form that refers to the form it is in. Therefore this.form holds a reference to the form object and that is what is passed to the function.

The function is passed a reference to the form. Since the parameter list of the function contains a variable named frm the reference to the form will be copied into frm. The data in the text field can now be read using:

frm.firstName.value

Setting the text field to a string can be done this way:

frm.firstName.value = “Hello World”

Here is the complete HTML page. The most relevant parts of the page are highlighted in green and are described in detail below.

function showAndClearField(frm)
This function is called when the button in the form is pushed. The frm parameter is supposed to receive a reference to the form. The reference, in this case, is equivalent to document.test which is another way to refer to the form — as a property of the document object. The function is designed to report what is in the text field and then clear it.

if (frm.firstName.value == “”)
This line checks to see if the text input field has been left empty.

frm.firstName refers to the input text field named firstName in the form.

frm.firstName.value refers to the value in the field.

alert(“The field contains the text: “ + frm.firstName.value)
Here frm.firstName.value also retrieves the value that has been entered into the firstName input field. In this case, it is concatenated to another string and displayed in an alert dialogue box.

frm.firstName.value = “”
Near the end of this short function, the field is cleared by setting its value to an empty string.

<form name=”test”>
Since this example never uses document.test to access the form it is not really necessary to actually name the form. However, it is good practice to do this.

<input type=”text” name=”firstName”>
In order to refer to the input text field the HTML tag that creates it must have a name attribute.

<input type=”button” Value=”Show and Clear input” onClick=”showAndClearField(this.form)”>
The button tag contains the onClick=”” event handler. As a result, whenever the button is pressed (or “clicked”) the Javascript inside the quotes is executed. In this case, the function named showAndClearField is called and it is passed the parameter this.form. Whenever you see the word this used in an event handler in an HTML tag the word this refers to the Javascript object that reflects (or represents) the HTML object created by the tag. In this cae, this refers to the button. Every form element also has a property that refers to the form it is in. So this.form is a reference to the form object the button is in. Thus we are passing a reference to the form to the function.


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 ) {
var i;
for ( 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 ) {
var values = [];
for ( 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 checkbox 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 ) {
var tempString = "";
var count = 0;
for ( 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 ) {
var i;
var values = [];
for ( 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 a 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 ) {
var i;
var count = 0;
var tempString = "";

for ( 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 an 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 ) {
var i;
var values = [];
for ( 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 ) {
var i;
var count = 0;
var tempString = "";
for ( i = 0; i < selectList.length; i++ ) {
if ( selectList.options[ i ].selected ) {
if ( count > 0 ) {
tempString += separator;
}
tempString += selectList.options[ i ].text;
count++;
}
}
return tempString;
}

JavaScript in Plain English

Learn the web's most important programming language.

The Geekiest One

Written by

I like big brains and I cannot lie! | Computer Enthusiast | Geek | From Planetary Science to Computer Science — ayran.dev

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade