Reading Form Data Using JavaScript

Overview

This week you will continue working with your site's web form. You are going to add JavaScript that reads the data entered and displays it neatly formatted on the page.

Preparation

• On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_8. Copy your complete set of files from the Week 7 assignment to this new folder. Open the folder for Week 8 in Visual Studio Code.
• Use the AI of your choice to research the use of the following JavaScript functions:
                    getElementById()
                    getElementsByName()
                    getElementsByTagName()

Focus on how to use them to read data entered by the user. You may ask the AI to show you examples, but you must write the code yourself (no copying and pasting or allowing the AI to write the code).

Add the JavaScript

1. Add a file named form.js to your website.
2. Before the closing </body> tag in the contact.html file (the file with the form), add the <script></script> tags and then add the src attribute to point to the form.js file.
3. Write a JavaScript function that reads the form's inputs (including the menu, checkboxes, and radio buttons) and then displays the information from the form in neatly organized format below the form when the user clicks the submit button. Again, you ask an AI for examples and explanations, but you need to write your own code.
   • Note: You may find it best to get the code written to read one of the inputs and display the value. As you get the code working to read that form input value and display it, move on to the next.
4. Document important sections of the code with comments.
5. Be sure to use console.log() to display relevant data in the developer tools console at key points in the script to help you confirm that the correct data is being read and written.
6. Update your code so that clicking the submit button triggers the JavaScript function that you have written.

Verifying Your Work

1. Check your contact page in two browsers to make sure that the HTML and the JavaScript work as expected. In a Word document, state which browsers you tested the pages in.
2. Go to the Nu HTML Checker tool validator.nu to verify the HTML for the revised contact page. When the page passes, get a screenshot of the successful validation and put it in the Word document.

Submission Requirements

Add the Word document to the folder containing the complete set of files for your site.

• Compress the folder and submit the zip file as an attachment to your submission.

Competencies Measured

By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:

• Competency 5: Create interactive web page behaviors using JavaScript.
  • Add JavaScript file and reference it from a <script> tag in the HTML form file.
  • Use appropriate JavaScript functions to read form input successfully.
  • Add an appropriate event handler for the submit button.
  • Use JavaScript to display the data entered in well formatted output on the page.