How to Retrieve Data from a Text Box in Javascript


Javascript


In this article, we will show how to retrieve data from a text box in Javascript.

This is input which a user may enter into a standard text box, or text field, of a web form.

This is very commonly used on the web such as in forms which a user has to fill in their information, such as first name, last name, telephone number, address, zip code, email address, credit card information, etc. used for tasks such as signing up for a service, paying for a product, joining a membership for a particular website, and so on.

Below is an example of a web form which asks a user for his/her first name and last name:

Enter first name:

Enter last name:

However, you can see with the above form that once entering information and clicking the submit button, the form doesn't do anything meaningful. It doesn't extract any information which the user enters which we can use for any practical purposes.

Once a user fills out the text fields of a form, how can we extract this information using Javascript so that we can process the information that a user enters?

HTML Code

Before we discuss the Javascript to extract the information from a web form, we first have to go over the HTML code which creates the text box. For the 2 text boxes shown in our example above, the HTML code to create them is:



The above HTML code is how we create text boxes, such as those seen in standard web forms, where a user can input information into.

Setting the input attribute to text allows means the input form field will be a text box. The only other attribute which each text box needs is the id attribute. In the cases of these 2 text boxes, the id attributes are firstname and lastname. This is a very important attribute because this is the attribute which Javascript will use in order to extract information each text box. Each text box which you use, even if you have 50 text boxes for a form, must each have a unique id attribute. This is how Javascript will know exactly which text box it is referencing. In this form, the unique id attributes are again firstname and lastname.

Javascript Code

To extract the information which a user enters into the text fields using Javascript, the Javascript code to do would be:

The line document.getElementById("firstname").value accesses the text box with an id of firstname and retrieves the value which the user has entered into this text box. Now that the text box value is accessed and retrieved, it must be stored. This is done by creating a Javascript variable and storing the value of the text box into this variable. All that must be done is a variable must be created and assigned to this text box value.



Below is a web form that is functional and that extracts the information which you type in and transfers you to a Confirmation Page which shows all the information which you entered.



Enter your First Name:

Enter your Last Name:




If you type into the form fields above and press the "Submit" button, a confirmation page will be created which shows the information (first and last name) which you have entered. Try it above.

HTML Code

To create the text boxes which are seen above, the code to do so is:



These lines above create the text boxes.

Javascript Code

The Javascript code to extract the information from the text boxes and then display it to the user is:



The Javascript code extracts the information from the form field by the id tags of the text boxes, which in this case are firstname and lastname. It takes the value of these id elements by the .value extension. Once it has the values of these text boxes, we then use document.writeln() functions to display the following lines of information.