How to Retrieve HTML Form Data Using JavaScript

Published: October 6, 2011

Updated: October 30, 2011

JavaScript: The web page stimulant
JavaScript: The web page stimulant

Once you have created a form using HTML, you may like to perform some action on the data included in the form. JavaScript provides methods to work with that data within the browser before the data is sent to a server or as an alternative to server processing. Perhaps, the form you created provides functionality that a server need not process, such as providing some form of calculator with no need for data storage.

One useful action for JavaScript is to redisplay what a site visitor entered on a form before the data is submitted to the server for processing. JavaScript uses two methods to display information on a web page. One method is the document.write() method and the other method is the getElementByID() method. Both methods display information but the document.write() method creates a new web page if the method is used after the initial web page loads. To display information on an existing page, use the getElementById() method.

In Form Attributes

Referring to the form created in the simple form hub (code snippet provided at the end of this hub for reference), you may notice that in some of the tags there were a couple of extra attributes. For instance, the <form> tag contained the name attribute. This attribute permits the programmer to refer back to the form after the visitor fills out the form, which the following code snippet demonstrates:

<script type="text/javascript">
  var firstName=document.contactForm.fname.value;
  var lastName=document.contatForm.lname.value;
  var emAddress=document.contactForm.email.value;
  
  document.writeln("You entered"+firstName+"for your first name");
  document.writeln("You entered"+lastName+"for your last name");
  document.writeln("You entered"+emAddress+"for your e-mail address");

  documetn.writeln("IS this correct?")
</script>

Script Results

Running the preceding script causes the browser to look inside the current HTML document for an element named "contactForm," specified by the document.contactForm... portions of lines 2,3, and 4. Within this element are three child elements named "fname", "lname", and "email" also specified in those lines.

The browser retrieves the values for those three elements and assigns those values to three variables declaired in lines 2, 3, and 4 of the script. A variable is an area in memory that a programmer specifies as an area for temporary storage. The programmer may then manipulate the information stored in the variable.

Lines 6, 7, and 8 of the script then direct the browser to display the values contained in those variables on the screen and add labels to the displayed values. The document.writeln() functions accomplish this task. Whatever is included within the opening and closing parenthesis "()" of the method will be displayed. Information contained within quotation marks in the parenthesis is displayed as literal values, The plus sign in the statements adds or concatenates variable information to the literal text.

Line 10 of the script displays a confirmation message.

Note: You include the above script within the <head> element that precedes the body of the document and the script would run after the user submits the form. This script would cause the browser to erase the form the user used to enter the data and replace the form with the information included in the script.

Next, learn how to display information on a page you already created.

Simple Contact form Code

<center>   
  <form action="retrieveInfo.asp" method="get" id="contactForm" name="contactForm">
    <table><tr><th colspan="2">Simple Contact Form</th></tr>
      <tr><td>First Name: </td><td><input id="fname" name="fname" /></td></tr>
      <tr><td>Last Name: </td><td><input id="lname" name="lname" /></td></tr>
      <tr><td>E-mail: </td><td><input id="email" name="email" /></td></tr>
      <tr><td></td><td><input type="submit" value="Submit" /></td></tr>
      <tr><td colspan="2">Submit Form for more Information</td></tr>
    </table>   
  </form>
</center> 

What do you think?

Your comments are always welcome.

More by this Author


Comments 2 comments

Dumbledore profile image

Dumbledore 5 years ago from Somewhere in Ohio Author

Thank you itech,

I look for simple methods to accomplish tasks, especially when I need to demonstrate a concept to students in introductory classes.


itech profile image

itech 5 years ago from New Delhi, India

Interesting.... And Useful... I always used jQuery to accomplish this task but I think this is much easier.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working