Web Hosting by Netfirms | Free Domain Names by Netfirms

Querying a text field's value

This section can also be applied to a text area.

Text fields are the perfect objects to get a small amount of input into your web application from the user, for example a phone number. JavaScript can query the data in a specified text field and check it to ensure it's the information the application expects.

The following example is going to require the user to type a number in the text field once the number is typed the user is expected to press the "check number" button. The "onclick" event of this button will call the "check number " function which will get a reference to the text field, check if it's value is a number and finally show the value with a message stating wether it's a number or not. Run Code | View Code

Process

Getting a reference to the text field in the form. - "textField"
Checking if the text field's value is NOT a number . - "isNaN"
Showing a message stating the text field's value and wether it's a number or not - alert
Function - checkNumber

Events

The pressing of the "check phone Number Button". - the button's "onClick" event

Input

The messages - The messages stating wether it's a number or not
The String displayed on the face of the button - "Check Number"

Event Trigger

The onClick event of the Check Phone Number button will call the checkNumber() function.

The Solution

Define the form elements

Make the form and give the form a name <form name="myForm"> Define the text field <input type="text"> Give the text field a name <input type="text" name=" myTextField "> Define the button <input type="button"> Set the text on the button's face <input type="button" value="Check number"> Register the onClick event <input type="button" value="Check number" onclick=""> Make the onClick event call the "checkNumber" function <input type="button" value="Check number" onclick=" checkNumber ()"> Close the form </form>

checkNumber

Function analysys

This function's purpose is to check if the value in the text field is a number and show an appropriate message stating the condition of the value in a model dialog.

This function first declares two local variables being "value" and "message". "value" will be assigned the value of the text field and "message" will be assigned one of two messages depending on the "value" variable.

For this function to continue it must get the value from the text field. It does this by first referring to the document object then the document object refers to the (predefined) form object "myForm" the form then refers to the (predefined) text field "myTextField". Once the text field is reference it's value is then inserted into "value" variable by referencing it's value property.

After the value property is set into the "value" variable it is checked to see if it's not a number with the "isNaN" (Is Not A Number - top-level JavaScript function). When nothing is typed into the text field "isNaN" thinks it is a number. However I disagree and believe a value of nothing is not a number so the code then checks if nothing was typed into the text field. If either of these conditions are met the "message" variable is set to the value of the "value" variable with a hard coded string stating that it is NOT a number. If the conditions fail the message variable is then again set to the value of "value" but this time with a hard coded string stating it is a number. Finally the alert method is used to show the formatted message.

Comments with code

function checkNumber (){

Declare the local variables var value var message Make the value variable the same value of the text field's value useing the document tree. value = document.myForm.textField.value Check if the value is Not a number or if it is an empty string if(isNaN(value) || value == "" ){

Set the message variable message = "The value[" + value + "] is NOT a number"

It's a number }else{

Set the message variable message = "The value [" + value + "] is a number"

} Show a model dialog with the message alert(message)

}

Important

The checking of a text field's value is normally performed just before the web browser sends the form to the server. In other words JavaScript allows a web author to validate the information on the client side rather then the server side. This saves server-processing time therefore freeing server resources. It also increases user satisfaction since they do not have to wait for a server response every time the information they entered is incorrect.

Run Code | View Code

See also Checkbox | Radio button | Select

JavaScript Tutorial Home