vent Listeners Return to the mas_register.js file in your editor. Directly below the initial comment section, insert an event listener for the window load event. Run an anonymous function in response to the event containing the following commands: Call the calcCart() function (which you will create shortly.) Create an onclick event handler for the regSubmit button that runs the sessionTest() function when the button is clicked. Create onblur event handlers for the input boxes with the ids: fnBox, lnBox, groupBox, mailBox, phoneBox, and banquetBox, running the calcCart() function in response to each event. Create an onchange event handler for the sessionBox selection list, running the calcCart() function when the selection list is changed. Create an onclick event handler for the mediaCB check box, running the calcCart() function in response. JavaScript Functions Create the sessionTest() function. The purpose of this function is to provide a validation test for the conference session selection list. Add the following commands to the function: Test whether the selected index of the sesssionBox selection list is equal to ‑1. If it is, the user has not selected a session package. Display the custom validation message Select a Session Package. If the selected index is not equal to ‑1 set the custom validation message to an empty text string. Create the calcCart() function. The purpose of this function is to calculate the registration cost and to save information about the customer’s choices in session storage. Add the following commands to the function: In the session storage variable confName store the value "firstName lastName" where firstName and lastName are the values of the firstName and lastName fields in the regForm form. Store the values of the group, email, phoneNumber, and banquetGuests fields in the session storage variables: confGroup, confMail, confPhone, and confBanquet. The cost of the banquet is $55 per guest. Multiply the value of the banquetGuests field by 55 and store the result in the session storage variable confBanquetCost. Record which session the user has selected. If the selected index of the sessionBox selection list is not equal to ‑1, store the text of the selected option in the session storage variable confSession and the value of the selected option in the confSessionCost session storage variable; otherwise store an empty text string and the value 0 respectively. The user can opt to purchase a media pack for $115 containing gifts from the conference. If the user has clicked the mediaCB check box, store the values "yes" and 115 in the confPack and confPackCost session storage variables; otherwise store the values "no" and 0. Calculate the total registration cost by storing the value session + banquet + media in the confTotal session storage variable, where session, banquet, and media are the values of the confSessionCost, confBanquetCost, and confPackCost session storage variables. (Hint: Use the parseFloat() method to add the numeric values of the data fields.) Call the writeSessionValues() function. Display the values of the session storage variables in the current web page by creating the writeSessionValues() function, adding the following commands: Set the text content of span elements with the ids "regName", "regGroup", "regEmail", "regPhone", "regSession", "regBanquet", and "regPack", to the values of the session storage variables, confName, confGroup, confMail, confPhone, confSession, confBanquet, and confPack. Set the text content of the span element with the id "regTotal" to the value $total where total is the value of the confTotal session storage variable. Document your work in the file with comments.

vent Listeners Return to the mas_register.js file in your editor. Directly below the initial comment section, insert an event listener for the window load event. Run an anonymous function in response to the event containing the following commands: Call the calcCart() function (which you will create shortly.) Create an onclick event handler for the regSubmit button that runs the sessionTest() function when the button is clicked. Create onblur event handlers for the input boxes with the ids: fnBox, lnBox, groupBox, mailBox, phoneBox, and banquetBox, running the calcCart() function in response to each event. Create an onchange event handler for the sessionBox selection list, running the calcCart() function when the selection list is changed. Create an onclick event handler for the mediaCB check box, running the calcCart() function in response. JavaScript Functions Create the sessionTest() function. The purpose of this function is to provide a validation test for the conference session selection list. Add the following commands to the function: Test whether the selected index of the sesssionBox selection list is equal to ‑1. If it is, the user has not selected a session package. Display the custom validation message Select a Session Package. If the selected index is not equal to ‑1 set the custom validation message to an empty text string. Create the calcCart() function. The purpose of this function is to calculate the registration cost and to save information about the customer’s choices in session storage. Add the following commands to the function: In the session storage variable confName store the value "firstName lastName" where firstName and lastName are the values of the firstName and lastName fields in the regForm form. Store the values of the group, email, phoneNumber, and banquetGuests fields in the session storage variables: confGroup, confMail, confPhone, and confBanquet. The cost of the banquet is $55 per guest. Multiply the value of the banquetGuests field by 55 and store the result in the session storage variable confBanquetCost. Record which session the user has selected. If the selected index of the sessionBox selection list is not equal to ‑1, store the text of the selected option in the session storage variable confSession and the value of the selected option in the confSessionCost session storage variable; otherwise store an empty text string and the value 0 respectively. The user can opt to purchase a media pack for $115 containing gifts from the conference. If the user has clicked the mediaCB check box, store the values "yes" and 115 in the confPack and confPackCost session storage variables; otherwise store the values "no" and 0. Calculate the total registration cost by storing the value session + banquet + media in the confTotal session storage variable, where session, banquet, and media are the values of the confSessionCost, confBanquetCost, and confPackCost session storage variables. (Hint: Use the parseFloat() method to add the numeric values of the data fields.) Call the writeSessionValues() function. Display the values of the session storage variables in the current web page by creating the writeSessionValues() function, adding the following commands: Set the text content of span elements with the ids "regName", "regGroup", "regEmail", "regPhone", "regSession", "regBanquet", and "regPack", to the values of the session storage variables, confName, confGroup, confMail, confPhone, confSession, confBanquet, and confPack. Set the text content of the span element with the id "regTotal" to the value $total where total is the value of the confTotal session storage variable. Document your work in the file with comments.

Programming Logic & Design Comprehensive

9th Edition

ISBN:9781337669405

Author:FARRELL

Publisher:FARRELL

Chapter8: Advanced Data Handling Concepts

Section: Chapter Questions

Problem 18RQ

See similar textbooks

Event Listeners

Return to the mas_register.js file in your editor. Directly below the initial comment section, insert an event listener for the window load event. Run an anonymous function in response to the event containing the following commands:

Call the calcCart() function (which you will create shortly.)
Create an onclick event handler for the regSubmit button that runs the sessionTest() function when the button is clicked.
Create onblur event handlers for the input boxes with the ids: fnBox, lnBox, groupBox, mailBox, phoneBox, and banquetBox, running the calcCart() function in response to each event.
Create an onchange event handler for the sessionBox selection list, running the calcCart() function when the selection list is changed.
Create an onclick event handler for the mediaCB check box, running the calcCart() function in response.

JavaScript Functions

Create the sessionTest() function. The purpose of this function is to provide a validation test for the conference session selection list. Add the following commands to the function:

Test whether the selected index of the sesssionBox selection list is equal to ‑1. If it is, the user has not selected a session package. Display the custom validation message Select a Session Package.
If the selected index is not equal to ‑1 set the custom validation message to an empty text string.

Create the calcCart() function. The purpose of this function is to calculate the registration cost and to save information about the customer’s choices in session storage. Add the following commands to the function:

In the session storage variable confName store the value "firstName lastName" where firstName and lastName are the values of the firstName and lastName fields in the regForm form.
Store the values of the group, email, phoneNumber, and banquetGuests fields in the session storage variables: confGroup, confMail, confPhone, and confBanquet.
The cost of the banquet is $55 per guest. Multiply the value of the banquetGuests field by 55 and store the result in the session storage variable confBanquetCost.
Record which session the user has selected. If the selected index of the sessionBox selection list is not equal to ‑1, store the text of the selected option in the session storage variable confSession and the value of the selected option in the confSessionCost session storage variable; otherwise store an empty text string and the value 0 respectively.
The user can opt to purchase a media pack for $115 containing gifts from the conference. If the user has clicked the mediaCB check box, store the values "yes" and 115 in the confPack and confPackCost session storage variables; otherwise store the values "no" and 0.
Calculate the total registration cost by storing the value session + banquet + media in the confTotal session storage variable, where session, banquet, and media are the values of the confSessionCost, confBanquetCost, and confPackCost session storage variables. (Hint: Use the parseFloat() method to add the numeric values of the data fields.)
Call the writeSessionValues() function.

Display the values of the session storage variables in the current web page by creating the writeSessionValues() function, adding the following commands:

Set the text content of span elements with the ids "regName", "regGroup", "regEmail", "regPhone", "regSession", "regBanquet", and "regPack", to the values of the session storage variables, confName, confGroup, confMail, confPhone, confSession, confBanquet, and confPack.
Set the text content of the span element with the id "regTotal" to the value $total where total is the value of the confTotal session storage variable.

Document your work in the file with comments.

"use strict";
New Perspectives on HTML5, CsS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 3
Filename: mas_register.js
Author:
Date:
Function List
calcCart()
Calculates the cost of the registration and saves data
in session storage
writeSessionValues()
Writes data values from session storage in to the
registration summary form
function calccCart() {
function writeSessionValues() {

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 5 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.