Javascript function double amounts

Question

1.00/5 (2 votes)

See more:

I'm trying to connect the hotel amount with the amount per day. For instance, if you select two days staying at the Economy hotel, it doubles the amount rather than doubling the amount for they the stay at the hotel alone. I've created a variable for days and added it to my if statements to retrieve the value. It was retrieving the amount for a single day correctly, but once I added that variable it began doubling everthing else.

When the user submits their form, a cost estimate for their trip should appear in an alert box with all the options:

Quote:
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)

This what I have so far.

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<script type="text/Javascript">
		function arrivalCity ()
		{
		var cost = 0;
		var days;
		var radHotel;

		days = document.reservation.selDay.value;


			if (document.reservation.radCity[0].checked)
				{
					cost = 200;
				}
			if (document.reservation.radCity[1].checked )
				{
					cost = 250;
				}
			if (document.reservation.radCity[2].checked)
				{
					cost = 150;
				}
			if (document.reservation.chkYes.checked)
				{
					cost = cost + 60;
				}
			if (document.reservation.radHotel[0].checked)
				{
					cost = cost + 140;
				}
			if (document.reservation.radHotel[1].checked)
				{
					cost = cost + 220;
				}
			if (document.reservation.radHotel[2].checked)
				{
					cost = cost + 300;
				}
			if ( days == "two")
				{
					cost = cost * 2  ;
				}

			alert (cost) ;
		}
</script>
</head>
<body>
<div id="header">
	<form name="reservation">
		<p>Where are you traveling to? <br/>
			Omaha <input type ="radio" name="radCity"> <br>
			Nashville <input type="radio" name="radCity"><br>
			Detroit <input type="radio" name="radCity"> </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><pre lang="Javascript">

Posted 13-Mar-15 11:22am

Member 11508350

Add a Solution

Comments

Sergey Alexandrovich Kryukov 13-Mar-15 17:48pm

This code screams: this is opposite to programming! You repeat everything as if you manually modified data.
Instead of repeating radCity[0]... 1, 2... use loops. And so on. Write it all accurately, and perhaps you will get less bugs. Can you use the debugger?
And so on...
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Answer 1 · 2015-03-13T17:01:00

I will try to keep it short and to the point, starting with the simple:
1. The values that are assigned to the various value attributes should be code-friendly and ease of processing. For example, the selDay, use "2" instead of "two" for the value attribute. if you do this way:

<option value="2">2</option>

then, it is very simple to get the value in JavaScript, like this:

cost = cost * document.reservation.selDay.value

This applies to the selBag too, that is for you to figure out.

2. Use checkboxes when you allow multiple selection. That is not the case for the pet option. It is either Yes or No. How many checkboxes do you need in the case? The hint is every checkbox has 2 states, i.e. checked or unchecked. Say you have a checkbox named as "hasPet" and to detect that in JavaScript, do this:

document.reservation.hasPet.checked

Keep thinking...

Now the more difficult...
3. Use JSON to store the hotel names and their corresponding costs as key-value pairs, in this way, you can get the cost for the selected hotel in JavaScript. For example:

C#

var hotels =[
             {"name":"Omaha", "cost":"200"},
             {"name":"Nashville", "cost":"250"},
             {"name":"Detroit", "cost":"150"}
           ];

add a value attribute that takes the hotel name for each radCity radio buttons, like this:

<input type ="radio" name="radCity" value="Omaha">

then, use a for loop to get the cost:

C#

for(i=0; i < hotels.length; i++){
    if (hotels[i].name == document.reservation.radCity.value) {
        cost = parseFloat(hotels[i].cost);
        break; // break out of the loop as it has found the hotel name
    }
}

Do the same for the radHotel radio button.
Read more: JSON Tutorial[^]
That is all that I can say for now. Enjoy your coding...