Multiplying 3 separate radiobutton values; Help?

Lana1993 · 09-25-2012, 04:56 AM

When an option in each section of the form is selected, the values of each selection need to be multiplied together when the 'calculate' button is clicked; however, after many attempts my conclusion is I clearly have no idea what I am doing. It would be amazing if I could get some help though?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>gotham airlines</title>
<script>

function calculateCost() {
var radioButton;
var cost = 0;

for (var i = 1; i <= 6; i++) {
radiobutton = document.getElementById("flight" + i);
if (radiobutton.checked == true) {
cost += parseInt(radiobutton.value);
}
}

alert("The selected flight will cost $" + cost);
}

</script>
</head>
<body>
<h1>Gotham Airlines Fare Calculator</h1>
<form>
<p>Complete the form below to calculate the cost of your flight.</p>
<p><input type="radio" id="flight1" name="flights"
value="230"> <label for="flight1">Gotham - Hill Valley</label><br>
<input type="radio" id="flight2" name="flights"
value="250"> <label for="flight2">Gotham - Las Venturas</label><br>
<input type="radio" id="flight3" name="flights"
value="190"> <label for="flight3">Gotham - Storybrooke</label><br>
<input type="radio" id="flight4" name="flights"
value="160"> <label for="flight4">Gotham - Marlinshire</label><br>
<input type="radio" id="flight5" name="flights"
value="270"> <label for="flight5">Gotham - Lillian</label><br>
<input type="radio" id="flight6" name="flights"
value="220"> <label for="flight6">Gotham - Seahaven</label></p>

<p><input type="checkbox" id="returnfare" name="return fare"
value="2"> <label for="returnfare">Click here if you will be purchasing a return fare</label></p>

<p><input type="radio" id="seating1" name="seating"
value="2"> <label for="seating1">First class</label><br>
<input type="radio" id="seating2" name="seating"
value="1.5"> <label for="seating2">Business class</label><br>
<input type="radio" id="seating3" name="seating"
value="0"> <label for="seating3">Economy class</label></p>
<p><input type="submit" value="Calculate"
onClick="calculateCost();"> <input type="reset"></p>
</form>
</body>
</html>

WolfShade · 09-25-2012, 01:29 PM

If you have more than one radio button with the same name, they become an array-like object, so you can't just get the value of "flights". You have to loop through the array, get the value of the one that is checked, and then calculate.

xelawho · 09-25-2012, 03:35 PM

you have 3 separate sections - flights, return ticket and seat class. But you only ever loop though the flights. You need to collect values for of all of them, multiply them at the end and then display the result. If you are going to submit this as homework you should study it to see how it works...

Code:

function calculateCost() { 

for (var i = 1; i < 7; i++) { 
var radiobutton = document.getElementById("flight" + i); 
if (radiobutton.checked == true) { 
var base=radiobutton.value;
		}
	}
var rtn=document.getElementById("returnfare").checked?2:1; 
for (var a = 1; a < 4; a++) { 
var radiobutton = document.getElementById("seating" + a); 
if (radiobutton.checked == true) { 
var seatclass=radiobutton.value;
		}
	}
var cost=base*rtn*seatclass;
alert("The selected flight will cost $" + cost); 
}

Lana1993 · 09-26-2012, 12:04 AM

Thank you so much, I would hug you. I agree I do need to study, this was actually a minor university assessment. I thought it would be easy, it isn't. It is beyond me, but I have a new found respect for who can actually do this. Again, thank you!!!