Forum Moderators: open
I have something like this but it doesn't work
function calculate ()
{
var location = document.ticket.location.value;
var quantity = document.ticket.quantity.value;
var subtotal = (location*quantity);
document.ticket.subtotal.value = subtotal;
}
down bellow is
<tr>
<td><select name="location" onChange="calculate()">
<option value="10">End zone $10</option>
<option value="20">Not bad $20</option>
<option value="30">Good $30</option>
</select></td>
<td><input type="text" name="quantity" ></td>
</tr>
thanks
First, please change your form name as I suggested in your other post. I'm not sure if it works the same on ID, I've always used name. Maybe someone else here will clarify that point.
Second, it's almost right, the problem is where you've tried to get the value of the select box. You first have to work out which drop down is selected, then get it's value directly.
var idx = document.ticket.location.selectedIndex;
var location = document.ticket.location[idx].value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Homework 5</title>
</head>
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript" language="JavaScript">
function check(delivery_type)
{
document.getElementById("answer").value=delivery_type
}
/*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
}*/
function calculate ()
{
var idx = document.ticket.location.selectedIndex;
var location = document.ticket.location[idx].value
var quantity = document.ticket.quantity.value;
var delivery_type = document.ticket.delivery_type.value;
var subtotal = (location*quantity);
var grandtotal = (subtotal*delivery_type);
document.ticket.subtotal.value = subtotal;
document.ticket.grandtotal.value = grandtotal;
}
/*function ComputeTotal ()
{
var idx = document.ticket.location.selectedIndex;
var location = document.ticket.location[idx].value
var quantity = document.ticket.quantity.value;
var delivery_type= document.ticket.delivery_type.value;
var total = (subtotal*delivery_type);
var subtotal = (location*quantity);
document.ticket.grandtotal.value = total;
}*/
</script>
</head>
<body>
<form id="ticket" name="myform">
<h3>Ticket Cost Calculator </h3><br />
<br />
<table border="0">
<tr>
<td>Location:</td>
<td>Quantity:</td>
</tr>
<tr>
<td><select name="location" onChange="calculate()">
<option value="10">End zone $10</option>
<option value="20">Not bad $20</option>
<option value="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" onchange="check(this.value)" value="15">Will call ($5) or</td>
<td><input type="text" name="answer" readonly="readonly"></td>
</tr>
<tr>
<td><input type="radio" name="delivery_type" onchange="check(this.value)" value="5">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" onClick="Calculate()"> </td>
<td> <input type="reset" value="Clear"></td>
</tr>
</table>
</form>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Homework 5</title>
</head>
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
This looks like the start of 2 HTML files? If this is really what's in your file, then delete everything up to the second <!DOCTYPE... statement.
Thanks for that post Foti, as this is evidently a new coder, I was working up to that.
To solve your next question....
Firstly, again I would change your input box to hide it:
<input type="hidden" name="grandtotal">
Surely to calculate the grand total, we just add the subtotal and delivery together?
var sub = document.myform.subtotal.value;
var delivery = document.myform.answer.value;
document.myform.grandtotal.value = sub + delivery;
If you put all those bits together now you should be able to get it working the way you like.
Then read up on Fotiman's post, when you have worked out the kinks you should bear in mind that it's better to write pages for substandard browsers and jazz them up, than write advanced code to dumb it down.
[edited by: Dabrowski at 9:17 pm (utc) on Nov. 16, 2007]
