ITSE 1411 Beginning Web
Assignment 10

Reading

JavaScript Text, Chapter 7 (Manipulating Data in Strings), pgs 331 - 357 FormProcessor.html example (notes)

Practice

• Manipulating strings
  • Create an assignment10 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Copy the FormProcessor.html page from your assignment9 folder into your assignment10 folder.
  • emailForm page
    • Click on EmailForm.html.
    • Right click on the page.
    • View Source
    • Save as EmailForm.html (notice you use the uppercase this time and the l in the extension.) in the assignment10 folder.
    • Open EmailForm.html in your editor and change the path that refers to js_styles.css refer to the location of your jsfiles in the public_html folder.
    • Add the coding on page 333 of the text.
    • Save the document as emailForm1.htm.

• Formatting Strings
  • emailForm2 page
    • If necessary, open your emailForm1.htm page in your editor.
    • Save as emailForm2.htm in your assignment10 folder.
    • Add the coding from pages 335 - 336 of the text.
    • Save the document.

• Counting Characters in a String
  • emailForm3 page
    • If necessary, open your emailForm2.htm page in your editor.
    • Save as emailForm3.htm in your assignment10 folder.
    • Add the coding from page 337 of the text.
    • Save the document.

• Finding and Extracting Characters and Substrings
  • emailForm4 page
    • If necessary, open your emailForm3.htm page in your editor.
    • Save as emailForm4.htm in your assignment10 folder.
    • Add the coding from pages 340 - 341 of the text.
    • Save the document.

• Replacing Characters and Substrings
  • emailForm5 page
    • If necessary, open your emailForm4.htm page in your editor.
    • Save as emailForm5.htm in your assignment10 folder.
    • Add the coding from pages 344 - 345 of the text.
    • Save the document.

• Matching Special Characters
  • emailForm6 page
    • If necessary, open your emailForm5.htm page in your editor.
    • Save as emailForm6.htm in your assignment10 folder.
    • Add the coding from page 350 of the text.
    • Save the document.

• Validating email addresses
  • emailForm7 page
    • If necessary, open your emailForm6.htm page in your editor.
    • Save as emailForm7.htm in your assignment10 folder.
    • Add the coding from page 355 of the text.
    • Save the document.

Hidden Field Practice

• Hidden fields are used to gather data that the user does not physically enter.
• The emailForm has a hidden field named recipientsList.
• Update emailForm7 page
  • If necessary, open your emailForm7.htm page in your editor.
  • Save as emailFormUpdate.htm in your assignment10 folder.
  • Assuming that the recipientsList field is to later be used to save off emails submitted by users, add code to assign the recipient_email to the recipientsList.
  • Change the onsubmit event handler in your form tag to: onsubmit="makeList(); return validateSubmission();"
  • Create a makeList() function in the head that assigns the recipientsList hidden element the value of the recipient_email element. (Remember to use DOM for both recipientsList and recipient_email.)
  • Change the action to go to formProcessor.htm
  • Save the document.

Explanation of FormProcessor

• The FormProcessor page uses JavaScript to parse the information sent to it from another page.
• The use of the FormProcessor.html is to show you that you can move information from one page to another page. This is called state information.
  • State information is the data entered on a page in a form or the information about the instance of the page. When a page is loaded the JavaScript interpreter is started. If you do nothing, when a page unloads, all of your JavaScript objects are lost. This means that you lose all of your state information.
    • After you have saved the EmailForm7.htm page, upload it in your browser.
    • Fill out the information in the text boxes.
    • 
    • From your browser, click on the send button.
    • Look at the address bar after your FormProcessor.html page comes up.
    • The ? separates the url from the data that has been sent from the EmailForm.html page.
    • Using the data shown in the image above,the state information looks as follows (without the line breaks):

      ?sender_name=Judy+Scholl&sender_email=jscholl%40austincc.edu&recipient_name=class+members
      &recipient_email=ITSE1411%40gmail.com&subject=class+assignments
      &message=Be+sure+to+complete+your+class+assignments&recipientsList=ITSE1411%40gmail.com
                            

• Look to the right of the ?. Notice the name value pairs that were sent from EmailForm.html page.
• After the ? you have listed the name of each element from the EmailForm.html page as well as the value that was entered. These are called the name=value pairs. Each name=value pair follows separated by &.
  
  
• Explanation of the javaScript code found in FormProcessor.html:
  
  
  • var formData = location.search;
    This statement allows you to get the query data. The search property is a string beginning with a question mark that specifies any query information in an HTTP URL.
    After this statement is executed, the variable formData consists of everything beginning with the ? to the end of the line.
    
    
  • formData = formData.substring(1, formData.length);
    This statement uses the substring function to start in position 1 of the variable formData. Position 1 is the position following the ?. Remember, strings start counting with 0.
    The length function returns the number of characters in the string, so the last string element will be the end of the substring.
    After this statement is executed, the variable formData consists of everything after the ?. Essentially, the ? is deleted, and the character after the ? is now in position 0.
    
    
  • Embedded blanks are not allowed when data is sent from one page to another. The browser automatically substitutes blanks with a "+" . If there are any +'s in your values, they need to be converted back to blanks. The while loop

                      while (formData.indexOf("+") != -1)
                        {
                          formData = formData.replace("+", " ");
                        }

    makes that change. The variable formData is a string. The indexOf function returns the location where a "+" is found or a -1 when no "+" is found.
    The replace function replaces the string in the first argument with the string in the second argument.
    Once the loop returns a -1 to end, all "+" characters will be blank characters.
    
    
  • formData = unescape(formData);
    Special characters are not allowed when data is sent from one page to another. The browser subsititues special characters with a character code entity. The function unescape changes the character code entity back to the special character. You would need this when an email address is entered.
    
    
  • var formArray = formData.split("&");
    The function split will break a string into array elements at the character designated. Your current formData string variable has a "&" between every name=value pair. After this statement, you will have a new array variable named formArray.
    formArray[0] will contain the first name=value pair for the first element in your surfboardRentals.htm page.
    formArray[1] will contain the second name=value pair for the second element in your surfboardRentals.htm page.
    
    
  • The last coding displays the contents of the array formArray (which is every name=value pair.)

                for (var i=0; i < formArray.length; ++i)
                {
                  document.writeln(formArray[i] + "<br />");
                }

Updating the FormProcessor

• Separating the name = value pairs
  • Right click on updated formProcessor.htm
  • View source.
  • Save as formProcessor.htm (Be sure to use a different extension than you did to previous FormProcessor.)
  • In LTS, open your emailForm7.htm page and save as emailFormUpdate.htm
  • Change the action to go to formProcessor.htm
  • Open in your browser to test. LTS will not link to another page within the editor.

Project

• Create a page age.htm that has a form that contains
  • a text box for the user's name
  • a text box for the user's age
  • a hidden text field named retirement
  • a submit button
  • a reset button
  • an onsubmit event handler in the form tag to call a function to test:
    • a name has been entered
    • a numeric value for age has been entered
  • if both text boxes are valid
    • when age is greater than or equal to 65 enter "yes" in the hidden field
    • when age is less than 65 enter "no" in the hidden filed
    • return true
  • if either text box is invalid
    • use an alert box to explain the error
    • return false
  • the action of the form should go to processAge.htm
• Create a page processAge.htm that
  • Writes the message on the page
    Hi name. At age # you may retire.
    or
    Hi name. At age # you are not ready to retire. Get to work.
  • name is the name entered on the form.
  • # is the age entered on the form.

Update your index page:

• Add links on your index page to the pages in your assignment10 folder that are to be graded:
  • emailForm7.htm
  • FormProcessor.html
  • emailFormUpdate.htm
  • formProcessor.htm
  • age.htm
  • processAge.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment10 folder with the files:
  • emailForm7.htm
  • FormProcessor.html
  • emailFormUpdate.htm
  • formProcessor.htm
  • age.htm
  • processAge.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.