Question: 4. Insert the initPage() function. The purpose of this function is to set up the initial conditions for the exp.htm page. Add the following commands

4. Insert the initPage() function. The purpose of this function is to set up the initial conditions for the exp.htm page. Add the following commands to the function: a. Declare an array variable named dataFields. This array will point to the input elements in the expense report for daily expenses of travel, lodging, and meals. b. The input elements for the daily travel, lodging, and meal expenses all belong to the expenseEntry class. Use a For loop to populate the content of the dataFields array with the object collection of all elements belonging to the expenseEntry class. c. For each item in the dataFields array, add an onblur event handler that runs the update() function whenever the focus leaves the dataFields element. d. Add an event handler to theWeb form that runs the validateForm() function when the form is submitted to the browser.

5. Create a function named testLength(). The purpose of the testLength() function is to test whether the user has entered any text in a required field. If no text has been entered, the function should highlight the field and return the value false. If any text has been entered, the function should remove any highlighting and return the valuebtrue. The function has a single parameter named field that represents the field object to be tested. To complete the function, insert the following commands: a. Insert a conditional expression that tests whether the length of the field value is equal to 0. b. If the length is equal to 0, then: (i) Change the background color of the field object to yellow and (ii) Return the Boolean value false; otherwise: (i) Change the background color of the field object to white and (ii) Return the Boolean value true.

6. Create a function named testPattern(). The purpose of this function is to compare the value of a field against a regular expression pattern. If the fields value does not match the regular expression, the function should highlight the field on the form and return the Boolean value false. If the fields value does match the regular expression, the function should remove any highlighting and return the Boolean value true. The function has two parameters: the field parameter, representing the field object to be tested; and regx, a regular expression containing the pattern used for the testing. To complete the testPattern() function, insert the following commands: a. Insert a conditional expression that employs the test() method to test whether the value of the field object matches the regular expression contained in the regx parameter. b. If the test() method returns the value false, then: (i) Change the background color of the field object to yellow, (ii) Change the color of the field object to red, and (iii) Return the Boolean value false; otherwise: (i) Change the background color of the field object to white, (ii) Change the color of the field object to black, and (iii) Return the Boolean value true.

7. Create a function named validateForm(). The purpose of this function is to validate the form before it can be submitted to the server by calling the testPattern() and testLength() functions you just created. The function has no parameters. Add the following commands to the function: a. Create a variable named isValid. The purpose of this variable is to record whether the form is valid or not. Set the initial value of the isValid variable to true. b. Call the testLength() function with the lname field object as the parameter. (Hint: Use the object reference document.forms[0].lname.) If the value returned by the testLength() function is false, set the value of the isValid variable to false. Repeat this step for the fname, address, and summary fields. c. Call the testPattern() function with a reference to the account field as the field parameter value. For the regx parameter, insert a regular expression literal that matches a text string containing only the text ACT followed by six digits. If the value returned by the testPattern() function is false, set the value of the isValid variable to false. d. Call the testPattern() function with the department field for the field parameter. The regx parameter should contain a regular expression literal for a text string containing only the characters DEPT followed by three digits. If the value of the testPattern() function is false, set the value of the isValid variable to false. e. Repeat the previous step for the project field, using a regular expression that matches a text string containing only the characters PROJ followed by five digits. f. Call the testPattern() function for the ssn field (containing the Social Security number of the employee). The regular expression should match either a nine-digit number or a text string in the form nnn-nn-nnnn. If the testPattern() function returns the value false, set the value of the isValid variable to false. g. Insert a conditional statement that tests whether the value of the isValid variable is false. If it is false, then display the following alert message: Please fill out all required fields in the proper format. h. Return the value of the isValid variable.

8. Add a function named calcRow(). The purpose of this function is to return the subtotal of the expenses within a single row in the travel expense table. The function has a single parameter named row, which represents the number of the table row (from 1 to 4) upon which the calculations will be performed. Add the following commands to the function: a. Create a variable named travel that is equal to the numeric value of the travelrow field, where row is the value of the row parameter. (Hint: Use the object reference document.forms[0].elements[travel+row].value.) Be sure to use the parseFloat() function to convert the field value to a number. In the same fashion, create a variable named lodge that is equal to the numeric value of the lodgerow field and a variable named meal that is equal to the numeric value of the mealrow field. b. Return the sum of the travel, lodge, and meal variables.

9. Create a function named calcTotal(). The purpose of this function is to return the total of all expenses in the travel expense table by calling the calcRow() function for each of the four rows in the table. The function has no parameters. Add the following commands to the function: a. Create a variable named totalExp and set its initial value to 0. b. Insert a For loop with a counter that runs from 1 to 4. c. Within the For loop, increase the value of the totalExp variable by the value returned by the calcRow() function using the value of the counter as the value of the row parameter. d. Return the value of the totalExp variable.

10. Create a function named update(). The purpose of this function is to update the expense values displayed throughout the table and to verify that the employee has entered a valid expense amount. The function will be called whenever the employee exits from one of the 12 expense fields in the table (initiating the blur event). Add the following commands to the function: a. Create a variable named numRegExp that contains the regular expression literal /^\d*(\.\d{0,2})?$/. This pattern matches any text string that only contains a number with or without two decimal place accuracy. b. Insert a conditional statement that tests whether the value property of the currently selected object matches the numRegExp pattern. (Hint: Use the this keyword to reference the currently selected object.) c. If the condition is met (meaning that the employee has entered a valid expense amount), then run the following commands: (i) Use the toFixed() method to display the value of the current object to two decimal places, (ii) Insert a For loop with a counter that runs from 1 to 4.Within the For loop, set the value of the sub + i field to the value returned by the calcRow() function, where i is the value of the For loop counter. Format the value to appear to two decimal places. (iii) Set the value of the total field equal to the value returned by the calcTotal() function. Display the total field value to two decimal places. d. If the condition is not met (meaning that the user has entered an invalid number), then: (i) Display the alert message Invalid currency value, (ii) Change the value property of the current object to 0.00, and (iii) Return the focus to the current object.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!