Forum Moderators: open
function validate(){
var chosenDelivery = getRadioValue("ticket","delivery_type");
if (chosenDelivery==null){
alert("Do you want to sit on the floor?");
return false;
}
if (chosenDelivery == "5"){
document.getElementById("ticket").delivery.value = "5";
}else{
document.getElementById("ticket").delivery.value = "15";
}
return true;
}
<script type="text/javascript" language="JavaScript">
function check(delivery_type)
{
document.getElementById("answer").value=delivery_type
}
</script>
</head>
<body>
<form id="ticket" onsubmit="()">
<h3>Ticket Cost Calculator </h3><br />
<br />
<table border="0">
<tr>
<td>Location:</td>
<td>Quantity:</td>
</tr>
<tr>
<td><select name="location" onChange="compute_total()">
<option value="End zone $10">End zone $10</option>
<option value="Not bad $20">Not bad $20</option>
<option value="Good $30">Good $30</option>
</select></td>
<td><input type="text" name="quantity" ></td>
</tr>
<tr>
<td>Subtotal:</td>
<td><input type="text" name="subtotal" readonly="readonly"></td>
</tr>
<tr>
<td><input type="radio" name="delivery_type" onclick="check(this.value)" value="5">Will call ($5) or</td>
<td><input type="text" name="answer" readonly="readonly"></td>
</tr>
<tr>
<td><input type="radio" name="delivery_type" onclick="check(this.value)" value="15">Overnight Delivery ($15)</td>
<td> </td>
</tr>
<tr>
<td>GrandTotal:</td>
<td><input type="text" name="grandtotal" readonly="readonly"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"> </td>
<td> <input type="reset" value="Clear"></td>
</tr>
</table>
</form>
</body>
</html>
I know i have a bunch of stuff in the html form but i wanted to go step by step and make sure that this part is working before i move on!
<form id="ticket" name="myform">
Then, I assume you don't want the user to be able to change the text box called 'answer', so we hide it.
<input type="hidden" name="answer">
Now the script.....
function check() {
// Find the radio buttons on the page
var radios = document.myform.delivery_type;
var value = 0;
// Loop through
for( var i = 0; i < radios.length; i++) {
if( radios[i].checked) {
value = radios[i].value;
}
}
// Store your value
document.getElementById("answer").value=delivery_type
}
Oh, and you can remove this.value from your input lines, as this scripts goes through them all anyway, we don't need to pass this value there.
[edited by: Dabrowski at 5:59 pm (utc) on Nov. 16, 2007]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<style type="text/css">
#ticket ul {
list-style: none outside;
margin-left: 0;
padding-left: 0;
}
</style>
<title></title>
</head>
<body>
<form id="ticket" action="">
<div>
<h3>Ticket Cost Calculator </h3>
<table border="0">
<tbody>
<tr>
<td>
<label for="location">Location:</label>
<div>
<select name="location" id="location">
<option value="10">End zone $10</option>
<option value="20">Not bad $20</option>
<option value="30">Good $30</option>
</select>
</div>
</td>
<td>
<label for="quantity">Quantity:</label>
<div>
<input type="text" name="quantity" id="quantity">
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td><label for="subtotal">Subtotal:</label></td>
<td><input type="text" name="subtotal" id="subtotal" readonly="readonly"></td>
</tr>
<tr>
<td>
<ul>
<li><input type="radio" name="delivery_type" id="willcall" value="5"><label for="willcall">Will call ($5)</label> or</li>
<li><input type="radio" name="delivery_type" id="overnight" value="15"><label for="overnight">Overnight Delivery ($15)</label></li>
</ul>
</td>
<td><input type="text" name="answer" id="answer" readonly="readonly"></td>
</tr>
<tr>
<td><label for="grandtotal">GrandTotal:</label></td>
<td><input type="text" name="grandtotal" id="grandtotal" readonly="readonly"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</tbody>
</table>
</div>
</form>
<script type="text/javascript">
window.onload = function() {
var ticket = document.getElementById('ticket');
var location = document.getElementById('location');
var quantity = document.getElementById('quantity');
var subtotal = document.getElementById('subtotal');
var willcall = document.getElementById('willcall');
var overnight = document.getElementById('overnight');
var answer = document.getElementById('answer');
var grandtotal = document.getElementById('grandtotal');
var computeTotal = function() {
var n = Number(location.options[location.selectedIndex].value);
var q = Number(quantity.value);
if (!isNaN(q)) {
subtotal.value = n * q;
}
};
var computeDelivery = function() {
for (var i = 0; i < ticket.delivery_type.length; i++) {
if (ticket.delivery_type[i].checked) {
answer.value = ticket.delivery_type[i].value;
break;
}
}
};
function computeGrandTotal() {
var s = Number(subtotal.value);
var a = Number(answer.value);
grandtotal.value = (!isNaN(s)?s:0) + (!isNaN(a)?a:0);
}
// Attach event handlers
location.onchange = function() { computeTotal(); computeGrandTotal(); };
quantity.onchange = function() { computeTotal(); computeGrandTotal(); };
willcall.onclick = function() { computeDelivery(); computeGrandTotal(); };
overnight.onclick = function() { computeDelivery(); computeGrandTotal(); };
};
</script>
</body>
</html>
