Results 1 to 5 of 5
  1. #1
    Join Date
    Feb 2002
    Location
    New York
    Posts
    791

    sum value based on selection in dropdown box

    What I am looking to do is I have a form which contains 2 drop down boxes. One drop down is called packages and is pulled from a mysql database table with each option containing a word such as "starter" , "enterprise" for example. I also have a second drop down box which is labeled billing cycles. with options such as monthly, quarterly, yearly.

    What I need to be able to do is via javascript when a user changes either one of the options in either one of the drop downs for a total price to be updated.

    So for example take a look at
    http://bit.ly/lWTlaF

    the above is a clientexec.com order form
    notice how when you change the option in the drop down labeled "Select Package:" the total price at bottom of page changes. Also the same when you change the drop down option labeled "Billing Cycle:"

    So how would I achieve this when each option value in the drop down labeled "Select Package:" is a name not a number. And I need it to be a name because once submit is pressed I need to know the name of the package being ordered.

    Any suggestions?
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just a programmer

  2. #2
    I too faced the relevant problem. Hope to receive some good sugesstions

  3. #3
    Join Date
    May 2004
    Location
    NYC
    Posts
    793
    The linked page came up blank for me (a basic page but no form), so I just made up some plan names.

    I used jQuery for the Javascript because most everyone uses it now and no one writes old-timey event handlers anymore, especially because of cross-browser differences.

    Code is tested and working. You can save it in a .html file and load that directly in a browser, but make sure you have an internet connection because it pulls the jquery javascript file remotely from the jQuery site.

    The text values which will get sent to the server are in the value attributes for the select fields. e.g., a "starter" plan with an annual billing cycle would send this data to the server:

    Code:
    plan=starter&period=annual
    Note that the values in the Javascript plans and periods variables must correspond directly to the select field attribute values. So, if you change the word "annual" to "yearly" in the periods option field, you must also change it in the period Javascript variable. This sentence will make more sense once you look at the code.

    Most of the action happens in the "calc_and_show_total()" function.

    This code is very basic, so a couple of points:

    • The javascript usually resides in separate files: one, static, containing the code, and the second, generated by server-side scripts, containing the variables with pricing and cycle data.
    • DON'T TRUST THE USER! Never send price data to the server as part of the form submission, and if you do, ignore it; recalculate the pricing server-side based on your own secure data. Also check that the plan names and billing cycles are valid. Users can -and will- try to spoof your forms.
    • There's a lot more code that a form like this needs: saving/restoring state if you gather data across multiple pages, verifying values, validating the form, etc. And you'll need server-side code to handle any submission errors for reporting back to the user.


    If you have any questions, ask away.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>dropdown test</title>
    </head>
    <body>
    	Select package: 
    	<select id="plan">
    		<option value="start">starter</option>
    		<option value="mini">mini</option>
    		<option value="corp">corporate</option>
    		<option value="ent">enterprise</option>
    	</select>
    	<br />
    	Billing cycle: 
    	<select id="period">
    		<option value="mo">monthly</option>
    		<option value="quarter">semi-annually</option>
    		<option value="annual">annually</option>
    	</select>
    	<br />
    	Total:<input type="text" id="total" value="0" size="5" />
    	<input type="text" id="details" value="0" size="40" />
    
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    	(function($)
    	{	
    		var plans = 
    		{
    			start	: 15,
    			mini	: 20,
    			corp	: 25,
    			ent		: 30
    		}
    
    		var periods =
    		{
    			mo		: 1,
    			quarter	: 3,
    			annual	: 12
    		}
    
    		$("#plan").change(function(){calc_and_show_total();})		
    		$("#period").change(function(){calc_and_show_total();})		
    		
    		function calc_and_show_total()
    		{
    			var plan 		= plans[$("#plan").val()];
    			var period 		= periods[$("#period").val()];
    		
    			$("#total").val('$' + (plan*period));
    			$("#details").val(
    				"("+ $("#plan :selected").text() +") " + plan + 
    				" * " + " ("+ $("#period :selected").text() +") " + period
    			);
    		}
    
    		// initialize our total
    		calc_and_show_total();
    		
    	})(this.jQuery);
    	</script>
    </body>
    </html>

  4. #4
    Join Date
    Feb 2002
    Location
    New York
    Posts
    791

    ,,,

    Thanks sea otter for the code snippet and ya of course I know that I would need to setup form validation, etc etc I was just having a brainfog on how to do the dynamic price total calculation. and of course the actual price that the payment processor would use would come from a server side query/calc so someone could not hack the form to pay less then they should :-)

    actually one question
    in your code you have hard coded prices for each plan (start, mini, etc) what if I wanted the page to pull the prices for each from a mysql table could I do something like

    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    	(function($)
    	{	
    		var plans = 
    		{
    </script>
    <?php
    $sql = mysql_query("SELECT price, pckname from packages where pcktype='1' order by pckname");
    while($r = mysql_fetch_array($sql)){
    extract($r);
       echo "$pckname : $price,";
    }
    ?>
    <script>
    		}
    which would output a few rows like
    corp : 25,
    ent : 30,
    mini : 20,
    start : 15
    Last edited by mjfroggy; 06-03-2011 at 08:54 AM.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just a programmer

  5. #5
    Join Date
    May 2004
    Location
    NYC
    Posts
    793
    Quote Originally Posted by mjfroggy View Post
    actually one question
    in your code you have hard coded prices for each plan (start, mini, etc) what if I wanted the page to pull the prices for each from a mysql table could I do something like

    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    	(function($)
    	{	
    		var plans = 
    		{
    </script>
    <?php
    $sql = mysql_query("SELECT price, pckname from packages where pcktype='1' order by pckname");
    while($r = mysql_fetch_array($sql)){
    extract($r);
       echo "$pckname : $price,";
    }
    ?>
    <script>
    		}
    Yeah, absolutely. That would work fine. Just make sure to trim the final comma. Javascript isn't forgiving about that. Something like

    Code:
    $str='';
    while(...) {
          .
          .
          .
          $str .= "$pckname: $price,";
    }
    rtrim ($str,',');
    echo $str;
    Last edited by sea otter; 06-03-2011 at 12:31 PM.

Similar Threads

  1. Need Dynamic Dropdown Login Box
    By kantlivelong in forum Software & Scripts Requests
    Replies: 0
    Last Post: 03-30-2010, 04:34 PM
  2. Multiple Login panel in 1 form with Dropdown box
    By ReliaSpace in forum Web Design and Content
    Replies: 4
    Last Post: 03-01-2010, 12:17 AM
  3. Replies: 3
    Last Post: 12-06-2006, 10:04 AM
  4. building SQL query with PHP based on user selection
    By croakingtoad in forum Programming Discussion
    Replies: 4
    Last Post: 02-01-2006, 03:08 AM

Posting Permissions

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