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:
- retrieves the value in the text field
- displays the text in an alert dialog 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
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:
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:
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 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
- The button tag contains the onClick=""
event handler. As a result whenever the button is pressed (or "clicked")
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
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.