Part 3; Create an order form for the three items you used in Part 2 (hoe, c clam
ID: 3803184 • Letter: P
Question
Part 3; Create an order form for the three items you used in Part 2 (hoe, c clamp, hedge clipper). The customer should be able to type the number of each item wanted. There should also be text boxes for customer name and shipping address. Use radio buttons for payment method. Provide at least the choices Visa, MasterCard and American Express. Each form element, not just payment, must have an associated <label> element. The action= attribute of your <form> element should be action="/formtest.php". Name your document l2p3.html and place it on the class server. Test your form by submitting some data. The expected result is that the fields will be echoed back to you. Create a link from your index page.
<--- this is ultimately what i need ---> Part 3; using form values for computation with JavaScript: Copy the order form from Lab Exercise 2, Part 3 to l4p3.html. (You can use the Unix command cp l2p3.html l4p3.html to do this or copy it locally and upload the copy with your SFTP tool.) Make a link to this new file from your index page.
Add JavaScript to your program to compute the total cost of the order. The total cost will be the sum of the price of each item times the quantity ordered times 1.07 to allow for taxes. Use a JavaScript confirm() call to display "The total cost of your order is (whatever the cost is)." The confirm() function displays a message box with your message and buttons for "OK" and "Cancel." It returns true of the "OK" button is clicked and false if the cancel button is clicked.
If the user of your form clicks OK, the form should be submitted to formtest.php as before. However, if the user clicks "Cancel" the form should not be submitted. See Part 2 for a strong hint on how to do this.
Your computed answer may not look like a dollar amount because JavaScript numbers are floating point. That is OK; you need not correct it. If the messy output bothers you, check JavaScript's toFixed function. It is still possible for your answer to be incorrect in the last penny because toFixed() truncates rather than rounding. That is OK too, but if you want to be exactly correct, add just under 1/2 cent (0.0049) to your computed value before calling toFixed().
Explanation / Answer
Hello!! here is the code for order form. You can save the code as per your file name
<html>
<head>
<title> order form </title>
<script type=”text/javascript”>
Function fun()
{
Var X;
x=(2*f1.hoe.value)+(4*f1.cc.value)+(6*f1.hc.value)*1.07;
Window.confrim(“total cost of the order with tax is”+ x);
var y;
if (confirm("Press a button!") == true) {
y = "You pressed OK! Your order confirmed! ";
} else {
xy= "order Canceled!";
}
}
</head>
<body>
<form name=”f1” action=”/formtest.php” method=”post”>
<h4>Enter the number of items</h4>
Hoe : $2/item <input type=”text” name=”hoe”>
C clamp: $4/item <input type=”text” name=”cc”>
Hedge clipper: $6/item <input type=”text” name=”hc”>
Please fill the following details:
Name : <input type=”text” name=”name”><br>
Shipping Address :<br>
<textarea name=”addr” rows=”5” cols=”25”
</textarea><br>
Payment Method<br>
<input type=”radio” name=”visa” value=”Visa”> Visa<br>
<input type=”radio” name=”mastercard” value=”MasterCard”>MasterCard<br>
<input type=”radio” name=”americanexp” value=”americanexp”>American Express<br>
<input type=”submit” value=”Confirm”>
</script>
</body>
</html>