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 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:
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 Input" onClick="showAndClearField(this.form)">