[RESOLVED] Calculation with Radio Buttons and Checkbox

[braybrooke]

Hi there,

Wondering if anyone can help me..... I am trying to do a simple calculation with 2 sets of radio buttons and one checkbox. The total cost needs to be the values of service "multiply by" car "plus" other.... the "other checkbox needs to be an optional.. I am just starting and cant seem to get it to work!! Any help would be appreciated. Cheers!

//Calculate and display the total cost of the selected services
function calculateCost() {

var radioButton; //A radio button
var cost = 0; //Cost of the selection

//add up the costs of the selected
for (var i= 1; i<= 9; i++) {
radioButton = document.getElementById ("service" + i);
if (radioButton.checked ==true) {
cost += parseInt (service.value) * parseInt(car.value) + parseInt(other.value);

if(cost == null){ //if cost is equal to null, a button HAS been not been checked

alert("Please check a radio buttton")

}

//Display the total cost of the selected services
alert ("The approximate cost is $" + cost);
}
</script>
</head>
<h2>Larry's Limousine Service</h2>
<p>Complete the form below for a quote on our limousine service.</p>
<form>
<p>Service required:</p>
<p><input type="radio" id="service1" name="service" value="50" /> <label for="service1">City to airport</label><br/>
<p><input type="radio" id="service2" name="service" value="50" /> <label for="service2">Airport to city</label><br/>
<p><input type="radio" id="service3" name="service" value="75" /> <label for="service3">Prom</label><br/>
<p><input type="radio" id="service4" name="service" value="100" /> <label for="service4">Wedding</label><br/>
<p><input type="radio" id="service5" name="service" value="90" /> <label for="service5">Other special event</label></p>
<p>&nbsp;</p>
<p>Car Required:</p>
<p><input type="radio" id="car1" name="car" value="1"/> <label for="car1">Luxury Sedan</label><br/>
<p> <input type="radio" id="car2" name="car" value="2"/> <label for="car2">6 passenger stretch limousine</label><br/>
<p><input type="radio" id="car3" name="car" value="2.5"/> <label for="car3">8 passenger stretch limousine</label><br/>
<p><input type="radio" id="car4" name="car" value="3"/> <label for="car4">10 passenger stretch limousine</label></p>
<p>&nbsp;</p>
<p><label for="other">Click here if your party includes more than 3 passengers: </label><input type="checkbox" id="other" name="ex_people" value="25"/></p> 
<p><input type="Submit" value="Calculate" onClick="calculateCost();" /> <input type="reset"/></p>
</form>
</body>
</html>

[johanafm]

First off, wrap your code in code tags, html code in html tags and php code in php tags. That is bbcode style tags.
Secondly, indent your code.

Now, to your code. Start by validating your code. It will not pass. Among other things, you use uppercase letters in attribute names, such as onClick, which is valid HTML but invalid XHTML. Then you close your input tags with /> which is valid XHTML and invalid HTML.

Furthermore, in your script, neither car, nor service nor other refer to a defined variable, and as such they do not refer to any element.

radioButton = document.getElementById ("service" + i);
if (radioButton.checked ==true) {
	// radioButton is defined and refers to an element. service, car and other do not.
	// perhaps change all  "radioButton" above to "service"
	cost += parseInt (service.value) * parseInt(car.value) + parseInt(other.value);
}

Then, cost == null will ALWAYS be false, since you start out by var cost = 0, and then do not modify it unless a radio button actually has been checked. As such, not clicking any radio button means this will be 0.

Start by going through the cars' radio buttons

	found = false;
	for(carIndex = 1, car = true; car && !found; ++carIndex) {
		car = d.getElementById('car'+carIndex);
		if (car && car.checked)
			found = true;
	}
	if (!car) {
		alert('No car selected');
		return;	
	}
	carVal = parseInt(car.value);

Then fix your cost == null part

// before the loop in your posted script
var noService = true;

// inside loop and if(service.checked)
noService = false;

// change if (cost == null) to
if (noService)

Also, do get the extra value

	var extra = 0;
	var other = d.getElementById('other')
	if (other.checked)
		extra = parseInt(other.value);

And finally change the calculation to

cost += parseInt (service.value) * carVal) + extra;

[braybrooke]

Your a legend... Thanks so much!!

[sammyIT]

hello. could you please send me the finial script. am trying to fix the errors but i have failed. thanks

[johanafm]

Show me what you got and I can have another go at it, if you wrap the code in bb code tags and indent it properly this time.

[sammyIT]

actually am working on something similar. i am trying to get it to substract the discount whose id is "payment" from the tour and add the id="other" if the checkbox is ticked.
and a default message if nothing is ticked.
i have tried it several times but failed. i am trying to learn java on my own through w3schools website. i will be thankful if you help me.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>newzealand hoilday</title>
<script type="text/javascript" language="javascript">
//calculate and diplay the cost of the tour
//tour
function calculateCost() {
var radioButton; // radio button
var cost = 0; //cost of the selected tour
var tour =0
var payment =0
var extra =0
// add up the cost of the selected tour and payment
for (var i= 1; i <= 4; i++) {
tour = document.getElementById("tour" + i);
if (tour.checked == true) {
cost = parseInt(tour.value);
  }
}
// Display the total cost of the selected tour) 

alert("The approximate cost $" + cost); 
}

</script>
</head>
<body>
<form>
<h1>New Zealand Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your New zealand hoilday:</p>
<p>Tour type:<br />
<input type="radio" id="tour1" name="tours" value="1500"/> 
<label for="tour1">12-day New Zealand Escape Tour</label><br />
<input type="radio" id="tour2" name="tours" value="1600"/>
<label for="tour2">14-day New zealand Panorama Tour</label><br />
<input type="radio" id="tour3" name="tours" value="1750"/>
<label for="tour3">15-day New zealand South to North Tour</label><br />
<input type="radio" id="tour4" name="tours" value="2100" />
<label for="tour4">17-day Best of New zealand  Tour</label>
</p>
<p> Payment date:<br />
<input type="radio" id="payment1 " name="payments" value="200"/> 
<label for="payment1">Before 1st August 2010 </label><br />
<input type="radio" id="payment2" name="payments" value="150" /> 
<label for="payment2">Between 1st and 31st  August 2010</label><br />
<input type="radio" id="payment3" name="payments" value="100 " />
<label for="payment3">Between 1st and 30th september 2010 </label><br />
<input type="radio" id="payment4" name="payments" value="0" />
<label for= "payment4">After 30th September 2010</label>
</p>
<p>Click here if you wnat to include an airfare from Sydney, Brisbane or Melbourne:
<input type="checkbox" id="other" name="extra"value="400" />
<P>
<input type="submit" value="Calculate"
onClick="calculateCost();" /> <input type="reset" />
</p>
<p>
</p>
</form>

</body>
</html>

MOD EDIT: [noparse]

[/noparse] bbcode tags addded; please use these in the future when posting HTML code.

[sammyIT]

actually am working on something similar. i am trying to get it to substract the discount whose id is "payment" from the tour and add the id="other" if the checkbox is ticked.
and a default message if nothing is ticked.
i have tried it several times but failed. i am trying to learn java on my own through w3schools website. i will be thankful if you help me.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>newzealand hoilday</title>
<script type="text/javascript" language="javascript">
//calculate and diplay the cost of the tour
//tour
function calculateCost() {
var radioButton; // radio button
var cost = 0; //cost of the selected tour
var tour =0
var payment =0
var extra =0
// add up the cost of the selected tour and payment
for (var i= 1; i <= 4; i++) {
tour = document.getElementById("tour" + i);
if (tour.checked == true) {
cost = parseInt(tour.value);
}
}
// Display the total cost of the selected tour)

alert("The approximate cost $" + cost);
}

</script>
</head>
<body>
<form>
<h1>New Zealand Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your New zealand hoilday:</p>
<p>Tour type:<br />
<input type="radio" id="tour1" name="tours" value="1500"/>
<label for="tour1">12-day New Zealand Escape Tour</label><br />
<input type="radio" id="tour2" name="tours" value="1600"/>
<label for="tour2">14-day New zealand Panorama Tour</label><br />
<input type="radio" id="tour3" name="tours" value="1750"/>
<label for="tour3">15-day New zealand South to North Tour</label><br />
<input type="radio" id="tour4" name="tours" value="2100" />
<label for="tour4">17-day Best of New zealand Tour</label>
</p>
<p> Payment date:<br />
<input type="radio" id="payment1 " name="payments" value="200"/>
<label for="payment1">Before 1st August 2010 </label><br />
<input type="radio" id="payment2" name="payments" value="150" />
<label for="payment2">Between 1st and 31st August 2010</label><br />
<input type="radio" id="payment3" name="payments" value="100 " />
<label for="payment3">Between 1st and 30th september 2010 </label><br />
<input type="radio" id="payment4" name="payments" value="0" />
<label for= "payment4">After 30th September 2010</label>
</p>
<p>Click here if you wnat to include an airfare from Sydney, Brisbane or Melbourne:
<input type="checkbox" id="other" name="extra"value="400" />
<P>
<input type="submit" value="Calculate"
onClick="calculateCost();" /> <input type="reset" />
</p>
<p>
</p>
</form>

</body>
</html>

[sammyIT]

Thanks again for your help.
i have got the checkbox and the tour type working when checked but still failed to make the paymentdate which is a discount to substract from the tour type form. i also need a erro message to show if no radion boxed is checked.
thanks so much

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>newzealand hoilday</title>
<script type="text/javascript" language="javascript">
function calculateCost() {
var extra = 0;
	var other = document.getElementById('other');
	if (other.checked){
		extra = parseInt(other.value);
  }

// add up the cost of the selected tour and payment
var cost = 0; //cost of the selected tour
for (var i= 1; i <= 4; i++) {
tour = document.getElementById("tour" + i);
if (tour.checked == true) {
cost = parseInt(tour.value)+cost;
}
}          

// Display the total cost of the selected tour) 

alert("The approximate cost $" + cost); 
}

</script>
</head>
<body>
<h1>New Zealand Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your New zealand hoilday:</p>
<form>
<p>Tour type:<br />
<input type="radio" id="tour1" name="tours" value="1500"/> 
<label for="tour1">12-day New Zealand Escape Tour</label><br />
<input type="radio" id="tour2" name="tours" value="1600"/>
<label for="tour2">14-day New zealand Panorama Tour</label><br />
<input type="radio" id="tour3" name="tours" value="1750"/>
<label for="tour3">15-day New zealand South to North Tour</label><br />
<input type="radio" id="tour4" name="tours" value="2100" />
<label for="tour4">17-day Best of New zealand  Tour</label>
</p>
<p> Payment date:<br />
<input type="radio" id="payment1 " name="payments" value="200"/> 
<label for="payment1">Before 1st August 2010 </label><br />
<input type="radio" id="payment2" name="payments" value="150" /> 
<label for="payment2">Between 1st and 31st  August 2010</label><br />
<input type="radio" id="payment3" name="payments" value="100 " />
<label for="payment3">Between 1st and 30th september 2010 </label><br />
<input type="radio" id="payment4" name="payments" value="0" />
<label for= "payment4">After 30th September 2010</label>
</p>
<p>Click here if you wnat to include an airfare from Sydney, Brisbane or Melbourne:
<input type="checkbox" id="other" name="extra"value="400" />
<P>
<input type="submit" value="Calculate"
onClick="calculateCost();" /> <input type="reset" />
</p>
<p>
</p>
</form>

</body>
</html>

[sammyIT]

Thanks again for your help.
i have got the checkbox and the tour type working when checked but still failed to make the paymentdate which is a discount to substract from the tour type form. i also need a erro message to show if no radion boxed is checked.
thanks so much

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>newzealand hoilday</title>
<script type="text/javascript" language="javascript">
function calculateCost() {
var extra = 0;
var other = document.getElementById('other');
if (other.checked){
extra = parseInt(other.value);
}

// add up the cost of the selected tour and payment
var cost = 0; //cost of the selected tour
for (var i= 1; i <= 4; i++) {
tour = document.getElementById("tour" + i);
if (tour.checked == true) {
cost = parseInt(tour.value)+cost;
}
}

// Display the total cost of the selected tour)

alert("The approximate cost $" + cost);
}

</script>
</head>
<body>
<h1>New Zealand Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your New zealand hoilday:</p>
<form>
<p>Tour type:<br />
<input type="radio" id="tour1" name="tours" value="1500"/>
<label for="tour1">12-day New Zealand Escape Tour</label><br />
<input type="radio" id="tour2" name="tours" value="1600"/>
<label for="tour2">14-day New zealand Panorama Tour</label><br />
<input type="radio" id="tour3" name="tours" value="1750"/>
<label for="tour3">15-day New zealand South to North Tour</label><br />
<input type="radio" id="tour4" name="tours" value="2100" />
<label for="tour4">17-day Best of New zealand Tour</label>
</p>
<p> Payment date:<br />
<input type="radio" id="payment1 " name="payments" value="200"/>
<label for="payment1">Before 1st August 2010 </label><br />
<input type="radio" id="payment2" name="payments" value="150" />
<label for="payment2">Between 1st and 31st August 2010</label><br />
<input type="radio" id="payment3" name="payments" value="100 " />
<label for="payment3">Between 1st and 30th september 2010 </label><br />
<input type="radio" id="payment4" name="payments" value="0" />
<label for= "payment4">After 30th September 2010</label>
</p>
<p>Click here if you wnat to include an airfare from Sydney, Brisbane or Melbourne:
<input type="checkbox" id="other" name="extra"value="400" />
<P>
<input type="submit" value="Calculate"
onClick="calculateCost();" /> <input type="reset" />
</p>
<p>
</p>
</form>

</body>
</html>

[sammyIT]

[html=sammyIT;10941568]Thanks again for your help.
i have got the checkbox and the tour type working when checked but still failed to make the paymentdate which is a discount to substract from the tour type form. i also need a erro message to show if no radion boxed is checked.
thanks so much

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>newzealand hoilday</title>
<script type="text/javascript" language="javascript">
function calculateCost() {
var extra = 0;
var other = document.getElementById('other');
if (other.checked){
extra = parseInt(other.value);
}

// add up the cost of the selected tour and payment
var cost = 0; //cost of the selected tour
for (var i= 1; i <= 4; i++) {
tour = document.getElementById("tour" + i);
if (tour.checked == true) {
cost = parseInt(tour.value)+cost;
}
}

// Display the total cost of the selected tour)

alert("The approximate cost $" + cost);
}

</script>
</head>
<body>
<h1>New Zealand Holiday Price Calculator</h1>
<p>Complete the form below to calculate the cost of your New zealand hoilday:</p>
<form>
<p>Tour type:<br />
<input type="radio" id="tour1" name="tours" value="1500"/>
<label for="tour1">12-day New Zealand Escape Tour</label><br />
<input type="radio" id="tour2" name="tours" value="1600"/>
<label for="tour2">14-day New zealand Panorama Tour</label><br />
<input type="radio" id="tour3" name="tours" value="1750"/>
<label for="tour3">15-day New zealand South to North Tour</label><br />
<input type="radio" id="tour4" name="tours" value="2100" />
<label for="tour4">17-day Best of New zealand Tour</label>
</p>
<p> Payment date:<br />
<input type="radio" id="payment1 " name="payments" value="200"/>
<label for="payment1">Before 1st August 2010 </label><br />
<input type="radio" id="payment2" name="payments" value="150" />
<label for="payment2">Between 1st and 31st August 2010</label><br />
<input type="radio" id="payment3" name="payments" value="100 " />
<label for="payment3">Between 1st and 30th september 2010 </label><br />
<input type="radio" id="payment4" name="payments" value="0" />
<label for= "payment4">After 30th September 2010</label>
</p>
<p>Click here if you wnat to include an airfare from Sydney, Brisbane or Melbourne:
<input type="checkbox" id="other" name="extra"value="400" />
<P>
<input type="submit" value="Calculate"
onClick="calculateCost();" /> <input type="reset" />
</p>
<p>
</p>
</form>

</body>
</html>[/code]