www.webdeveloper.com
Results 1 to 2 of 2

Thread: Updating Cost Automatically

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    Updating Cost Automatically

    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!!

    HTML Code:
    <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> 

  2. #2
    Join Date
    Jan 2014
    Posts
    28
    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.
    Code:
    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..

    Code:
    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.

    Code:
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles