Order form total textbox from radio buttons
Question
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>
1 answers
solution1
1 ACCPTED 2012-06-10 21:01:48
First, put the following code anywhere in your JS files:
var prices = new Object();
function updateTotal () {
var total = 0.00;
for (var price in prices) {
total += price;
}
document.getElementById("total").value = total; // Add the id "total" to the input field
}
Then for every radio button's html tag add the follwing:
onchange="javascript:prices['cases'] = parseInt(this.value); updateTotal();"
and replace 'cases' with the respective values. Now when you add new prices all you have to do is add the onchange function to the appropriate tag and the updatePrice() function still works correctly without modification.
See a working demo here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dynamically increase/decrease total price in order form that uses radio buttons
Radio buttons subtract from total when checked
Total Of Radio Buttons
Create a total from two different groups of 'radio buttons' in React
Check radio buttons from dynamic form
Adding total of checked Radio Buttons
Bootstrap - Textbox with two radio buttons
jQuery validation for textbox and Radio buttons
Form with radio buttons + logic
Order of conditions are effecting radio buttons
Related Tags