Updating Cost Automatically

This site is best viewed in a modern browser with JavaScript enabled.

mikex2321

Hi guys,

I'm trying to create a simple quote calculator to show the user how much tickets will cost if they choose X quantity of tickets. I'd like the quote to update in the #total_figure div each time they change the quantity from the option selections.

For example, if they choose 2 tickets at $50 and 1 ticket @ $20, the #total_figure should be $120

Many thanks for any help!!


<form id="book" method="post">

<label>

<span class="bold_yellow">Ticket 1 @ $20</span>

	<select id="adults">

		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>

	</select>

</label>	


<label>

<span class="bold_yellow">Ticket 2 @ $50</span>

	<select id="children">

		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>

	</select>

</label>



<label>

<span class="bold_yellow">Ticket 3 @ $100</span>

	<select id="family">

		<option value="0">0</option>
		<option value="1">1</option>

	</select>

</label>		



<div class="total">

	<div class="total_title">

		<p class="bold_yellow">TOTAL:</p>

	</div>							


	<div class="total_figure">

		<p id="total_figure" class="bold_yellow">$0.00</p>

	</div>

</div>


<input type="submit" value="submit"/>

</form>

jburridge

You would use query selector to grab the values of the elements you want to multiply and also the element that you want to put the total in.

var ticketAdults = document.queryselector(#adults);
var ticketChildren = document.queryselector(#children);
var ticketFamily = document.queryselector(#family);
var totalPrice = document.queryselector(#total_figure);

Now if you use ticketAdults.value and the customer selected 3 tickets for adults the value would be 3. So you could do..

var totalAdult = ticketAdults.value * 20;
var totalChildren = ticketChildren.value * 50;
var totalFamily = ticketFamily.value * 100;

Also, I'm a little confused on your prices but, The 20, 50, and 100 are the price of each ticket above so adjust accordingly.

You can then take all totals and set the value of totalPrice.

totalPrice.value = totalAdult+totalChildren+totalFamily;

You can do this a lot cleaner with less variables but I was trying to break it down for you so you know what each thing does.