SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a script that uses the names of the form elements to carry out the calculation. It uses the onchange event to recalculate the total. I put the total in a textbox so that it would be transferred on submitting your form. Keep in mind that the onchange event will only happen if you make a change. Selecting the same number twice will not fire the event.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>calculator</title>
    <script type="text/javascript">
     function calc(formObj)
      { var allTots= parseInt(formObj["adults"].value)*20+
                     parseInt(formObj["children"].value)*50+
                     parseInt(formObj["family"].value)*100;
        formObj["total_figure"].value=allTots;
      }
    </script>
    <style type="text/css">
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    #wrap { margin:50px; }
    .bold_red  { color:#F00;  }
    .bold_blue  { color:#00F; text-align:center;  }
    .m10 { margin-top:10px; }
    
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
      <form name="book" method="post">
        <span class="bold_red" accept-charset="ISO-8859-1">Ticket 1 @ $20</span>&nbsp;
        <select name="adults" onchange="calc(this.form)">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select><span class="bold_red">&nbsp; Ticket 2 @ $50</span>&nbsp;
        <select name="children" onchange="calc(this.form)">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select><span class="bold_red">Ticket 3 @ $100</span>&nbsp;
        <select name="family" onchange="calc(this.form)">
        <option value="0">0</option>
        <option value="1">1</option>
        </select>
        <div class="total">
          <div class="total_title">
            <p class="bold_red">TOTAL:</p>
          </div>
          <div class="total_figure">
            <input class="bold_blue" type="text" name="total_figure" value="0" size="10">
          </div>
        </div>
        <input class="m10" type="submit" value="submit">
      </form>
    </div>
    <!-- end wrap -->
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

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