Retrieving information from forms JavaScript Retrieving information from forms

Learning Objectives By the end of this lecture, you should be able to: Describe where the information comes from when retrieving from a text box or text area, as opposed to a form element that has a ‘value’ attribute. Retrieve values from textboxes, text areas, select boxes, store that information in variables.

Information you can obtain from a form In order to retrieve text, your form element must either: Require the user to enter text (e.g. via a text box or a text area) In this case, the value we retrieve will be whatever the user has typed in the text box. --- OR --- Have a ‘value’ attribute In this case, the value comes from form elements in which you (the developer) created a ‘value’ attribute and assigned it a value. For example, recall that when we created the <option> tags in our select boxes, we assigned a value to them: What month were you born in? <select id="selMonthBorn"> <option value="jan">January</option> <option value="feb">Febuary</option> <option value="mar">March</option> etc... </select>

Retreiving information from a form element The syntax is: document.getElementById('ID-NAME').value; For example, supposed we had a text box with an ID of 'txtFirstName'. We could retrieve whatever the user entered in that box with the following line of code: var name = document.getElementById('txtFirstName').value; This will retrieve whatever the user typed inside a text field with the id ‘txtFirstName’ and will store it in the variable called ‘name’. The word ‘document’ will not change during this course. It simply refers to the current web page. The value inside the parentheses must match with one of the ID names in your HTML document. The ‘value’ term says you wish to retrieve the value from that element. If the element you are getting the value of is a text field or text area, then the information you get back will be whatever was typed by the user. If your element has a value attribute (e.g. select boxes), then that is the information that will be retrieved. Example: Retrieving the value from a select box: var month_born = document.getElementById('selMonthBorn').value; Will retrieve the value selected by the user from a select box called ‘selMonthBorn’ Suppose that one of the options in that select box was: <option value="feb">Febuary</option> If the user selects that option, then the variable month_born will be assigned "feb".

Retreiving and storing information from a form element Once we retrieve a value from a form, where should we put it? This is one of the countless situations in programming where we use variables. Can you predict what the following lines of code will do? Try to figure it out before moving to the next slide. var firstName, lastName; var nationality; var favoriteColor; firstName = document.getElementById('txtFirstName').value; lastName = document. getElementById('txtLastName').value; favoriteColor = document.getElementById('selFavoriteColor').value; comments = document.getElementById('textarComments').value;

Retreiving and storing information from a form element var firstName, lastName; var nationality; var favoriteColor; firstName = document.getElementById('txtFirstName').value; lastName = document. getElementById('txtLastName').value; favoriteColor = document.getElementById('selFavoriteColor').value; comments = document.getElementById('textarComments').value; Lines 1-3 are, of course, our variable declarations. Lines 4 and 5 are retrieving the values of text fields. Therefore, the information retrieved will be whatever the user entered. Line #6 is retrieving the value of a select box. In this case, the text stored by the variable will be the information entered inside the ‘value’ attribute of the particular option tag that was selected by the user. Line #7 retrieves whatever text the user typed in a text area. I know it is a text area without looking at the HTML code since I used the 'textar' prefix. Just one way in which naming conventions can help you more easily interpret what your code is doing.

Pitfall One common source of confusion for students at this point, is not being clear on the distinction between variable names and form element names. Be sure you understand the difference. Form Element Name: When you create a form element, you must give it a name. We give our form elements their names using the 'id' attribute. The reason you give each form element a name is so that you have a way of referring to that element via your JavaScript code. Example: If you had a text box in your form in which the user must indicate how old they are, you would probably give the form element an identifier of something like to 'txtAge': <input type="text" id="txtAge"> Variable Name: When you declare a variable, this is an entirely different JavaScript construct. Recall that a JS variable is simply a little piece of storage in which you temporarily hold information. In this talk, we have been using variables to store the information we retrieved from our form. Example: In your script (i.e. as opposed to your HTML form), you might declare a variable to store whatever the user entered for their age: var age = document.getElementById('txtAge').value;

Checked Items When working with checkboxes and radio buttons, we will need to do things a little differently. In order to make them work for us, we will need to learn how to use “if-else” statements. This will come up 1-2 modules down the road.

File See ‘js_form_retrieval.htm’