Im trying to create a Javascript program that calculates a customer’s order from your company based on the quantity of the item and the price entered by the customer and total the complete order. Display the results in an alert dialog box. Provide validation also. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Antonio Palmer Unit 6</title>
<style type="text/javascript">
.style1 {
border-style: solid;
border-width: 2px;
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false;}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
}
</style>
<style type="text/css">
.style1 {
border-style: solid;
border-width: 2px;
}
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A*75.00 + B*30.00;
}
// end of JavaScript functions -->
</SCRIPT>
</style>
</head>
<body>
<h1>Palmer's Web Design Company Order Form</h1>
<p> </p>
<p>Please Place Your Order Here</p>
<p>
Item
Qty
Price </p>
<table class="style1" style="width: 100%">
<tr>
<td class="style1" style="height: 56px; width: 574px"> Web Pages (Per
Page)</td>
<td class="style1" style="height: 56px; width: 114px">
<form method="post">
<input name="Atext" style="width: 74px; height: 40px" type="text" /></form>
</td>
<td class="style1" style="height: 56px">
<form method="post">
<input name="priceText1" style="width: 83px; height: 34px" type="text" value="75.00" /></form>
</td>
</tr>
<tr>
<td class="style1" style="height: 66px; width: 574px">Web Hosting
(Number of Years)</td>
<td class="style1" style="height: 66px; width: 114px">
<form method="post">
<input name="Btext" style="width: 75px; height: 46px" type="text" /></form>
</td>
<td class="style1" style="height: 66px">
<form method="post">
<input name="priceText2" style="width: 80px; height: 46px" type="text" value="30.00" /></form>
</td>
</tr>
<tr>
<td style="height: 78px; width: 574px">
<form method="post">
<input name="Button1" style="width: 102px; height: 21px" type="button" value="Calculate Total" />
</form>
</td>
<td class="style1" style="height: 78px; width: 114px"></td>
<td class="style1" style="height: 78px">
<form method="post">
<input name="form" style="width: 81px; height: 49px" type="text" /></form>
</td>
</tr>
</table>
<p> </p>
<p><input name="ClearButton" style="width: 100px" type="button" value="Clear Field" /></p>
<form method="post">
<form name="calculator" method="post">
<p><input type="button" value="calculate total" name="calculatebutton" onclick="calculatesum(this.form.input_a.value, this.form.input_b.value, this.form)"></p>
<p><input type="button" value="clear fields" name="clearbutton" onclick="clearform(this.form)"></p>
<p>total = <input type=text name="total" size=12></p>
</form>
</body>
</html>
29 Jun, 2008 - 02:39 PM
| 