Homework SourseAdding a javascript to my program to perform the total cost
Adding a javascript to my program to perform the total cost . It would be the sum of price of each items quality *1.07 to also add in taxes. Do a jacascrip confirm() to call to display. \"the total cost of the order is ( Price ).\" the confirm() function displays a message box with a message and buttons for \"OK\" and \"cancel\". It returns true of the \"OK\" is clicked and \"false\" is it was canceled. Just ADD whats needed within my HTML CODE Please
If ok was selected it should be submitted to the form test.php as before. if canceled it shouldn\'t be submitted. Jus Add it into this program please. And perform everything needed.
<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"table.css\" />
<title> My Fruit Table </title>
<body>
<h1 > Fruit Table </h1>
<table
>
<tr>
<th>Fruit Name </th>
<th>Price </th>
<th> Shipping weight </th>
</tr>
<tr>
<td> Apples</td>
<td>$4.00 </td>
<td> 5.3 lb</td>
</tr>
<tr>
<td> Blueberries</td>
<td>$6.00 </td>
<td>6 lb</td>
</tr>
<tr>
<td> Grapes</td>
<td>$8.50 </td>
<td>9 lb</td>
</tr>
</table>
<br>
<br>
<form name=\"frm\" action=\"http://weblab.kennesaw.edu/formtest.php\">
Customer Name <input type=\"text\" name=\"Customer name\"> <br />
Apples Quantity <input type=\"text\" name=\"Apples unit\"><br />
Blueberries Quantity <input type=\"text\" name=\"Blueberries unit\"><br />
Grapes Quantity <input type=\"text\" name=\"Grapes unit\"><br />
Shipping Address <input type=\"text\" name=\"Shipping address\"> <br />
Payment Mode
<select name=\"Payment mode\" >
<option value=\"Visa\"> Visa </option>
<option value=\"MasterCard\"> MasterCard</option>
<option value=\"Amex\">American Express</option>
</select>
<input type=\"submit\" value=\"Place Order\"> <input type=\"reset\" value=\"Clear Form\">
</form>
</body>
</html>
Solution
I have added the confirm() function for you along with some changes to your existing code. Its working as required. It will give a message saying \"your total cost is $xxx\". If the user clicks on the OK button, the form will be submitted otherwise it won\'t.
------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var a=document.getElementById(\"apple_qty\").value;
var b=document.getElementById(\"bb_qty\").value;
var c=document.getElementById(\"grape_qty\").value;
var price= (a*4)+(b*6)+(c*8.50);
var total=price*1.07;
if (confirm(\"The total cost of order is: \"+total) == true)
{
return true;
}
else{ return false;
}
}
</script>
</head>
<body>
<h1 > Fruit Table </h1>
<table
>
<tr>
<th>Fruit Name </th>
<th>Price </th>
<th> Shipping weight </th>
</tr>
<tr>
<td> Apples</td>
<td>$4.00 </td>
<td> 5.3 lb</td>
</tr>
<tr>
<td> Blueberries</td>
<td>$6.00 </td>
<td>6 lb</td>
</tr>
<tr>
<td> Grapes</td>
<td>$8.50 </td>
<td>9 lb</td>
</tr>
</table>
<br>
<br>
<form name=\"myForm\" action=\"http://weblab.kennesaw.edu/formtest.php\"
onsubmit=\"return validateForm()\" method=\"post\">
Customer Name <input type=\"text\" name=\"Customer name\"> <br />
Apples Quantity <input type=\"text\" id=\"apple_qty\"name=\"Apples unit\"><br />
Blueberries Quantity <input type=\"text\" id=\"bb_qty\" name=\"Blueberries unit\"><br />
Grapes Quantity <input type=\"text\" id=\"grape_qty\" name=\"Grapes unit\"><br />
Shipping Address <input type=\"text\" name=\"Shipping address\"> <br />
Payment Mode
<select name=\"Payment mode\" >
<option value=\"Visa\"> Visa </option>
<option value=\"MasterCard\"> MasterCard</option>
<option value=\"Amex\">American Express</option>
</select>
<input type=\"submit\" value=\"Place order\"> <input type=\"reset\" value=\"Clear Form\">
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
Feel free to reach out to me if you have any doubts.
Keep learning :)
