using form values for computation with JavaScript: Copy the order form from Lab
ID: 3854767 • Letter: U
Question
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().
<!DOCTYPE html>
<html>
<head>
<title>Tools Order Form</title>
<style>
.fieldset-auto-width {
display: inline-block;
}
</style>
<script>
var hoes = document.getElementById("numberOfHoes");
var wrenches = document.getElementById("numberOfWrenches");
var saws = document.getElementById("numberOfSaws");
var totalPriceOfHoes = hoes * 29;
var totalPriceOfWrenches = wrenches * 14;
var totalPriceOfSaws = saws * 29;
var totalPrice = totalPriceOfHoes + totalPriceOfWrenches + totalPriceOfSaws * 1.07;
function total() {
return confirm("The total cost of your order is $" + totalPrice);
}
</script>
</head>
<body>
<h1>Tools Order form</h1>
<form action="/formtest.php" method="post">
<p>
<label for="numberOfHoes">Product Name: Hoes</label>
<input type="text" name="numberOfHoes" id="numberOfHoes" size="3" maxlength="3" />
</p>
<p>
<label for="numberOfWrenches">Product Name : Crescent Wrench</label>
<input type="text" name="numberOfWrenches" id="numberOfWrenches" maxlength="3" />
</p>
<p>
<label for="numberOfSaws">Product Name : Saw</label>
<input type="text" name="numberOfSaws" id="numberOfSaws" maxlength="3" />
</p>
<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" maxLength="25" required/>
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" maxLength="25" required/>
</p>
<p>
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="20" required/>
</p>
<p>
<strong>Please select a payment type.</strong>
</p>
<fieldset class="fieldset-auto-width">
<label for="Visa">Visa</label>
<input type="radio" name="paymentType" id="Visa" value="Visa" />
<label for="AE">American Express</label>
<input type="radio" name="paymentType" id="AE" value="AE" />
<label for="Discover">Discover Card</label>
<input type="radio" name="paymentType" id="Discover" value="Discover" />
<label for="Master">Master Card</label>
<input type="radio" name="paymentType" id="Master" value="Master" />
</fieldset>
<input type="submit" value="Submit" >
</form>
</body>
</html>
fix it please
Explanation / Answer
Hi, here is the modified code. You have done simple mistakes like placing javascript code outside the function and not calling .value on document.getElementById etc. Now, everything works fine
CODE:
<%--
Document : sample1244
Created on : 7 Jul, 2017, 10:37:38 AM
Author : miracle
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Tools Order Form</title>
<style>
.fieldset-auto-width {
display: inline-block;
}
</style>
<script>
function total() {
//use .value attribute of document.getElementById to get the value of the text field
var hoes = document.getElementById("numberOfHoes").value;
var wrenches = document.getElementById("numberOfWrenches").value;
var saws = document.getElementById("numberOfSaws").value;
var totalPriceOfHoes = hoes * 29;
var totalPriceOfWrenches = wrenches * 14;
var totalPriceOfSaws = saws * 29;
var totalPrice = totalPriceOfHoes + totalPriceOfWrenches + totalPriceOfSaws * 1.07;
// confirm box
var x= confirm("The total cost of your order is $" + totalPrice);
//if user clicks cancel return false.
if(x==false)
{
return false;
}
}
</script>
</head>
<body>
<h1>Tools Order form</h1>
<form action="/formtest.php" method="post">
<p>
<label for="numberOfHoes">Product Name: Hoes</label>
<input type="text" name="numberOfHoes" id="numberOfHoes" size="3" maxlength="3" />
</p>
<p>
<label for="numberOfWrenches">Product Name : Crescent Wrench</label>
<input type="text" name="numberOfWrenches" id="numberOfWrenches" maxlength="3" />
</p>
<p>
<label for="numberOfSaws">Product Name : Saw</label>
<input type="text" name="numberOfSaws" id="numberOfSaws" maxlength="3" />
</p>
<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" maxLength="25" required/>
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" maxLength="25" required/>
</p>
<p>
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="20" required/>
</p>
<p>
<strong>Please select a payment type.</strong>
</p>
<fieldset class="fieldset-auto-width">
<label for="Visa">Visa</label>
<input type="radio" name="paymentType" id="Visa" value="Visa" />
<label for="AE">American Express</label>
<input type="radio" name="paymentType" id="AE" value="AE" />
<label for="Discover">Discover Card</label>
<input type="radio" name="paymentType" id="Discover" value="Discover" />
<label for="Master">Master Card</label>
<input type="radio" name="paymentType" id="Master" value="Master" />
</fieldset>
<input type="submit" value="Submit" >
</form>
</body>
</html>
Please do comment if you have any queries.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.