Add JavaScript to your program to compute the total cost of the order. The total
ID: 3821185 • Letter: A
Question
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.
</head>
<body>
<h1>Tools for Sale</h1>
<h2>Price is based on unit weight</h2>
<form action="/formtest.php">
<table>
<tr>
<th>Tools</th>
<th>Price per Pound ($/lb)</th>
<th>Weight</th>
<th>Quantity</th>
</tr>
<tr>
<td>Monkey Wrench</td>
<td>$5.99</td>
<td>1</td>
<td>
<input type="text" name="mnkywrnch" id="mnkywrnch" size="10" />
</td>
</tr>
<tr>
<td>Pitchfork</td>
<td>$7.99</td>
<td>1</td>
<td>
<input type="text" name="ptchfrk" id="ptchfrk" size="10" />
</td>
</tr>
<tr>
<td>Saw</td>
<td>$4.59</td>
<td>1</td>
<td>
<input type="text" name="saw" id="saw" size="10" />
</td>
</tr>
</table>
<divi class="custInfo">
<label>First Name
<input type="text" id="fname" name="firstName" size="30" />
</label>
<label>Last Name
<input type="text" id="lname" name="lastName" size="30" />
</label>
<br />
<label>Street Address
<input type="text" id="streetAdr" name="streetAddress" size="45" />
</label>
<br />
<label>City
<input type="text" id="city" name="City" size="30" />
</label>
<label>State
<input type="text" id="state" name="State" size="30" />
</label>
<label>Zip Code
<input type="text" id="zip" name="zipCode" size="10" />
</label>
<br />
<label>Payment:
<br />
<input type="radio" name="radio" name="payment" value="visa" />Visa
<input type="radio" name="radio" name="payment" value="master" />Mastercard
<input type="radio" name="radio" name="payment" value="amex" />American Express
</label>
<br />
<br />
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
Explanation / Answer
<htmL>
</head>
<body>
<h1>Tools for Sale</h1>
<h2>Price is based on unit weight</h2>
<!-- on press of submit chech() function will execute -->
<form action="/formtest.php" >
<table>
<tr>
<th>Tools</th>
<th>Price per Pound ($/lb)</th>
<th>Weight</th>
<th>Quantity</th>
</tr>
<tr>
<td>Monkey Wrench</td>
<!-- set id for td -->
<td id="Wrench_td">$5.99</td>
<td>1</td>
<td>
<input type="text" name="mnkywrnch" id="mnkywrnch" size="10" value="0"/>
</td>
</tr>
<tr>
<td>Pitchfork</td
<!-- set id for td -->
<td id="Pitchfork_td">$7.99</td>
<td>1</td>
<td>
<input type="text" name="ptchfrk" id="ptchfrk" size="10" value="0" />
</td>
</tr>
<tr>
<td>Saw</td>
<!-- set id for td -->
<td id="Saw_td">$4.59</td>
<td>1</td>
<td>
<input type="text" name="saw" id="saw" size="10" value="0"/>
</td>
</tr>
</table>
<divi class="custInfo">
<label>First Name
<input type="text" id="fname" name="firstName" size="30" />
</label>
<label>Last Name
<input type="text" id="lname" name="lastName" size="30" />
</label>
<br />
<label>Street Address
<input type="text" id="streetAdr" name="streetAddress" size="45" />
</label>
<br />
<label>City
<input type="text" id="city" name="City" size="30" />
</label>
<label>State
<input type="text" id="state" name="State" size="30" />
</label>
<label>Zip Code
<input type="text" id="zip" name="zipCode" size="10" />
</label>
<br />
<label>Payment:
<br />
<input type="radio" name="radio" name="payment" value="visa" />Visa
<input type="radio" name="radio" name="payment" value="master" />Mastercard
<input type="radio" name="radio" name="payment" value="amex" />American Express
</label>
<br />
<br />
<input type="submit" value="Submit" />
</div>
</form>
<script type="text/javascript">
// javascript function for calculating the total price
function check()
{
// getting he price value from the td
var saw_price=document.getElementById("Saw_td").innerText;
var pitchfork_price=document.getElementById("Pitchfork_td").innerText;
var wrench_price=document.getElementById("Wrench_td").innerText;
// getting the quantity from the text box
var saw_qty=document.getElementById("saw").value;
var pitchfork_qty=document.getElementById("ptchfrk").value;
var wrench_qty=document.getElementById("mnkywrnch").value;
//removing the dollar($) symbol in the front
saw_price=saw_price.substring(1, saw_price.length-1);
pitchfork_price=pitchfork_price.substring(1, pitchfork_price.length-1);
wrench_price=wrench_price.substring(1, wrench_price.length-1);;
// converting the values to float
saw_price=parseFloat(saw_price)
pitchfork_price=parseFloat(pitchfork_price)
wrench_price=parseFloat(wrench_price)
// converting the values to int
saw_qty=parseInt(saw_qty)
pitchfork_qty=parseInt(pitchfork_qty)
wrench_qty=parseInt(wrench_qty)
// calculating the total
var total=(saw_price*saw_qty)+(pitchfork_price*pitchfork_qty)+(wrench_price*wrench_qty);
// calculating the tax 1.07 each quantity is equal total *1.07
total =total*1.07;
// confirmation popup and flot is rounding using Number((total).toFixed(2)) funtion
var rst = confirm("The total cost of your order is : "+Number((total).toFixed(2)));
if( rst == true )
{
return true;
}
else
{
return false;
}
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.