Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

First name: Last name: Quantity: Problem: Create a program to process your form with JavaScript (embedded JavaScript program) Retrieve the form values, performs a calculation

First name: Last name: Quantity:

Problem: Create a program to process your form with JavaScript (embedded JavaScript program)

Retrieve the form values, performs a calculation and displays the results to the user (on screen)

Modify the submit button so that when you click on the button it calls the JavaScript program.

Modify the button tag to call the function and not submit the form. onclick="calculateTotal(); return false;"

In the book they inserted the onclick attribute inside the input/button tag. ((Review listing 3-20) However in this case we want to write some content back to the page. So for now we have to stop the form from submitting the values to the web server (return=false;).

Create the JavaScript program to process the form.

Insert the script tags in the head section.

Inside the script tags, create the function called calculateTotal.

Inside the function, retrieve the user name, location, and number of items that the user typed in the textbox. (Refer to listing 3-20 on how to use the getElementById method.)

Create an object called myData. (Refer to listing 5-13)

Set the customer name (cusName) the value the user entered.

Set the delivery date (delDate) the value the user entered.

Set the number of items (numItems) to the value the user entered

The price is $4.25 per item. The tax rate is 7%. Shipping rate is 2%.

Calculate the total for the product, tax, shipping and order.

Format the data

The values returned are real values. Ending 0s may be cut off. So $10.40 would look like $10.4 to the user. This is just like in other languages. JavaScript has functions to help you format the numbers and string variables.

Go to http://www.w3schools.com/jsref/jsref_obj_number.asp (Links to an external site.).

Review the number methods (Read about toFixed).

Then, for each of the values returned from the calculations, form them with the toFixed method.

Display the results

Monetary values should show the two decimals. Use line breaks inside your message to make the message look better.

When the user clicks on the submit button, write a message to the user.

Display the same message on the web page using document.write Make sure to put in the correct values. M

Make sure to convert the data types to strings before you display them.

Here is a sample of what the output should look like:

Thank you John Smith for your order. You will receive 10 items delivered to you on December 1. You price of your items is $42.50. The tax charge is $2.98. The shipping charge is $0.85. Your total is $46.33.

Code must work in HTML5

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Oracle Databases On The Web Learn To Create Web Pages That Interface With Database Engines

Authors: Robert Papaj, Donald Burleson

11th Edition

1576100995, 978-1576100998

More Books

Students also viewed these Databases questions