I've managed to alert the price of my first radio button, but adding the rest of the function is confusing to do. I know I'm going to have more than one if and else stament. I'm creating a form to retrieve the cost of booking a flight ticket with certain specifications. When the user submits their form, a cost estimate for their trip should appear in an alert box with all the options:
Arrival City: Use a radio button. Choices should be Omaha ($200), Nashville ($250), Detroit ($150)
Number of days as a select box with options from 2 through 6
Select box for ‘Extra Baggage ($30 each)’. Options should be ‘No Extra Bags’, ‘1 Extra Bag’, ‘2 Extra Bags’, ‘3 Extra Bags’
Have a checkbox for the following: Bringing a pet ($60)
A radio button to select the type of hotel: Economy Hotel ($140), Standard Hotel ($220), Upscale Hotel ($300)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/Javascript">
function arrivalCity ()
{
if (document.reservation.radCity[0].checked)
{
alert("Your estimate is " + document.reservation.radCity[0].value);
}
else if (document.reservation.radCity[1].checked )
{
alert("Your estimate is " + document.reservation.radCity[1].value);
}
else if (document.reservation.radCity[2].checked)
{
alert ("Your estimate is " + document.reservation.radCity[2].value);
}
}
</script>
</head>
<body>
<div id="header">
<form name="reservation">
<p>Where are you traveling to? <br/>
Omaha <input type ="radio" name="radCity" value="$200"> <br>
Nashville <input type="radio" name="radCity" value="$250"><br>
Detroit <input type="radio" name="radCity" value="$150"> </p>
<p>How many days are you staying?<br>
<select name="selDay">
<option value="two"> 2 </option>
<option value="three"> 3 </option>
<option value"four"> 4 </option>
<option value="five"> 5 </option>
<option value="six"> 6 </option>
</select></p>
<p>Extra Baggage ($30 each): <br>
<select name="selBag">
<option value="noBag"> No Extra Bags</option>
<option value="oneBag"> 1 Extra Bag</option>
<option value="twoBag">2 Extra Bags</option>
<option value="threeBag"> 3 Extra Bags</option>
</select> </p>
<p>Bringing a pet ($60):<br>
Yes <input type="checkbox" name="chkYes"><br>
No <input type="checkbox" name="chkNo"> <br> </p>
<p>Select the name of the hotel:<br>
Economy Hotel <input type="radio" name="radHotel" value="$140"><br>
Standard Hotel <input type="radio" name="radHotel" value="$220"><br>
Upscale Hotel <input type="radio" name="radHotel" value="$300"><br>
</select></p>
<p><input type="button" value="Book My Ticket" onclick="arrivalCity ()"> </p>
</body>
</html>
Submit an article or tip