ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Retrieve HTML Form Data Using JavaScript

Updated on October 30, 2011

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.

Comments

    0 of 8192 characters used
    Post Comment

    • Dumbledore profile imageAUTHOR

      This Old Guy 

      7 years ago from Somewhere in Ohio

      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

      Krishna 

      7 years ago from Dausa, India

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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)