Getting and Setting Input Text Field Values

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:

Enter something into the field and press the button.
Please try this a few times.

Enter your First Name:

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 the onClick="" 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.

<HTML>
<HEAD>
<TITLE>JavaScript Form - Input Text Field</TITLE>
<SCRIPT Language="JavaScript">
<!--//
function showAndClearField(frm){
  if (frm.firstName.value == "")
      alert("Hey! You didn't enter anything!")
  else
      alert("The field contains the text: " + frm.firstName.value)
  frm.firstName.value = ""
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test">
<H2>Enter something into the field and press the button. <br>
Please try this a few times.</H2>
<P>Enter your First Name: <INPUT TYPE="TEXT" NAME="firstName"><BR><BR>
<INPUT TYPE="Button" Value="Show and Clear Input" onClick="showAndClearField(this.form)">
</P>
</FORM>
</BODY>
</HTML>
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 dialog 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 a 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 attirbute.
 
<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.