I’m working on a project for class where we need to implement a couple of features. Right now the one that I’m stuck on is making the value in the order total textbox update automatically as users make selections using the radio buttons in the ComputerForm. If anyone could tell me how I should script this it would be most appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Final: Computer Order Form </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Joshua Aslan Smith">
<meta name="Keywords" content="">
<meta name="Description" content="Final Project">
<script type="text/javascript">
function doClear()
{
document.AddressForm.customer.value = "";
document.AddressForm.address.value = "";
document.AddressForm.city.value= "";
document.AddressForm.state.options[0].selected = "true";
document.AddressForm.zip.value = "";
document.AddressForm.phone.value= "";
document.AddressForm.email.value= "";
document.ComputerForm.cases[0].checked = false;
document.ComputerForm.cases[1].checked = false;
document.ComputerForm.cases[2].checked = false;
document.ComputerForm.monitors[0].checked = false;
document.ComputerForm.monitors[1].checked = false;
document.ComputerForm.monitors[2].checked = false;
document.ComputerForm.printers[0].checked = false;
document.ComputerForm.printers[1].checked = false;
document.ComputerForm.printers[2].checked = false;
return;
}
//function totalPrice()
//{
// var t1 = document.ComputerForm.cases.selected.value;
// var t2 = document.ComputerForm.monitors.selected.value;
// var t3 = document.ComputerForm.printers.selected.value;
// var total = document.AddressForm.total.value;
// total.value = t1.value + t2.value + t3.value;
// }
</script>
</head>
<body> <h1 align="center">Computer System Order Form</h1> <table border="black" cellpadding="10px" align="center"> <tr> <td>
<table cellpadding="10px">
<form name="ComputerForm">
<tr>
<td>
Computer Case Style:</br>
<input type="radio" name="cases" value="500.00" /> Desktop Case (500.00) </br>
<input type="radio" name="cases" value="600.00" /> Mini-Tower Case (600.00) </br>
<input type="radio" name="cases" value="700.00" /> Full-Tower Case (700.00) </br>
</td>
<td>
<img src="case.jpg" alt="pc case" >/>
</td>
</tr>
<tr>
<td>
Computer Monitor: <br/>
<input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
<input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
<input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00) </br>
</td>
<td>
<img src="monitor.jpg" alt="pc >monitor" />
</td>
</tr>
<tr>
<td>
Computer Printer:<br/>
<input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
<input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
<input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
</td>
<td>
<img src="printer.jpg" alt="pc printer" />
</td>
</tr>
</form>
</table> </td> <td>
<table padding="10px">
<tr>
<form name="AddressForm">
<td>
Total System Price:
</td>
<td>
$<input type="text" name="total" readonly value="0.00" size="8">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
Full Name:
</td>
<td>
<input type="text" name="customer" />
</td>
</tr>
<tr>
<td>
Street Address:
</td>
<td>
<input type="text" name="address" />
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<input type="text" name="city" />
</td>
</tr>
<tr>
<td>
State:
</td>
<td>
<select name="state">
<option value=""></option>
<option value="DE">DE</option>
<option value="NJ">NJ</option>
<option value="NY">NY</option>
<option value="PA">PA</option>
</select>
</td>
</tr>
<tr>
<td>
Zip:
</td>
<td>
<input type="text" name="zip" />
</td>
</tr>
<tr>
<td>
Phone Number:
</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>
Email Address:
</td>
<td>
<input type="text" name="email">
</td>
</tr>
</form>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit Order" onClick="doSubmit()" />
</td>
<td>
<input type="button" value="Clear Form" onClick="doClear()" />
</td>
</tr>
</table> </td> </tr> </table> </body> </html>
First, put the following code anywhere in your JS files:
Then for every radio button’s html tag add the follwing:
and replace
'cases'with the respective values. Now when you add new prices all you have to do is add theonchangefunction to the appropriate tag and theupdatePrice()function still works correctly without modification.See a working demo here.