Answered step by step
Verified Expert Solution
Question
1 Approved Answer
Completed Project 6-3 Do the following: 1. Use your code editor to open the project06- 03_txt.html and project06-03_txt.js files from the js06 project03 folder.
Completed Project 6-3 Do the following: 1. Use your code editor to open the project06- 03_txt.html and project06-03_txt.js files from the js06 project03 folder. Enter your name and the date in the comment section of each file and save them as project06- 03.html and project06-03.js, respectively. 2. Go to the project06-03.html file in your code editor and link the page to the project06- 03.js file, deferring loading of the script. Study the contents of the file and note field names associated with each input element within the form Save your changes to the file. 3. Go to the project06-03.js file in your code editor. Below the comment section declare the useShip variable to reference the element with the id "useShip". Add an event listener to useShip to run the copyShippingToBilling() function when clicked. 4. Create the copyShippingToBilling() function that copies values from the shipping fields to corresponding billing fields. Within the function, insert an if statement that tests whether useShip is checked and if it is, do the following: 1. Set the value of the firstnameBill field to the value of the firstnameShip field. 2. Repeat the previous step to set the value of the lastnameBill, address1 Bill, address2Bill, to the values of their corresponding fields in the shipping part of the form. 3. Set the selectedIndex property of the stateBill field to the value of the selectedIndex property of the stateShip field. 5. Below the copyShippingToBilling() function do the following: 1. Declare the formElements variable and using the querySelectorAll() method store within it a node list corresponding to elements selected with "input[type='text']". 2. Declare the fieldCount variable with a value equal to the length of the formElements node list. 3. Declare the errorBox referencing the element with the id "errorBox". 6. Create a for loop that iterates through each element in the formElements node list and for each element apply an event listener that calls the showValidationError() function in response to the invalid event. 7. Create the showValidationError(evt) function and add the following commands to it: 1. For the event object, evt, apply the preventDefault() method to prevent the browser from applying the native browser tools to respond to invalid data. 2. Set the textContent property of errorBox to the text string "Complete all highlighted fields". 7. Create the showValidation Error(evt) function and add the following commands to it: 1. For the event object, evt, apply the preventDefault() method to prevent the browser from applying the native browser tools to respond to invalid data. 2. Set the textContent property of errorBox to the text string "Complete all highlighted fields". 8. Save your changes to the file and then open js06-03.html in your browser. 9. Verify that you can copy shipping address information to the billing fields by clicking the Same as Shipping Address box. 10. Verify that you cannot submit the form until all data fields are completed (aside from the second address fields) and that validation errors appear in the error box below the form.
Step by Step Solution
★★★★★
3.61 Rating (144 Votes )
There are 3 Steps involved in it
Step: 1
Based on the given instructions you are asked to perform a series of tasks to create a form that allows users to copy shipping address information int...Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started