Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are, but you ought to be able to do this simple homework by yourself. I don't understand why adults are $20 but children are $50.

    The quantities of tickets are numbers so there is no point in making them string values (in quotes).

    Code:
    <html>
    <head>
    </head>
    
    <body>
    <form id="book" method="post">
    
    <label>
    
    	<span class="bold_yellow">Ticket 1 @ $20</span>
    
    		<select id="adults" onchange = "calculate()">
    
    			<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" onchange = "calculate()">
    
    			<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" onchange = "calculate()">
    
    			<option value=0>0</option>
    			<option value=1>1</option>
    
    		</select>
    
    </label>		
    
    
    	<div class="total">
    
    	<p class="bold_yellow" id = "total_figure">TOTAL: $0.00
    
    	</div>
    
    <br><br>
    
    <input type="submit" value="Submit"/>
    
    </form> 
    
    <script type = "text/javascript">
    function calculate() {
    var a = document.getElementById("adults").value;
    var c = document.getElementById("children").value;
    var f = document.getElementById("family").value;
    var t = a*20 + c* 50 + f*100;
    document.getElementById("total_figure").innerHTML = "TOTAL: $" + t.toFixed(2);
    }
    </script>
    
    </body>
    </html>
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 03-01-2014 at 02:41 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Amazing, thank you so much!


  •  

    Posting Permissions

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