Sum of drop down boxes.

Hi, I have a form set up at the moment where the user selects a text value in 2 separate drop down boxes. This value is then submitted into the database with their user id/name/email etc.

Is there any way i can assign each of the options in the dropdown a numerical value and add them together and then display them to the user. I know you can set the value of the dropdown option to a number but then this number will be submitted into the database instead of the text value that i want.

anyway you can see the form here (removed link)

basically the user is selecting riders for a fantasy bike league. and each rider costs a certain amount of money. The user also has a budget so I dont want them to be able to submit the form if the sum cost of their selected riders is above the budget value.

(the 2 first fields in the form are filled as their name and username so if your not registered/logged in theyll be blank)

anyway thanks for any help.

Sam.

Hi smappler,

You can do this fairly easily with JavaScript. There are various ways to do it. One I've seen beore is to use the end of the name or id field to set a value i.e. id='something_1000' and then pick this off in the script, or you could add a couple of arrays in a script snippet and look up the values in these.

Bob

hi bob thanks for the quick reply. That sounds very promising. do you have an example or tutorial i can look at for summing just the last portion of the dropdown value.
thanks.

hi bob/anyone. does anyone else know how you can sum like this with javascript?

thanks.

Hi smappler,

the code is dependent on your form code and is not quick to do but the idea behind it is easy, post here a small piece of HTML code for 2 of your fields to sum and I will try to post a JS code to do it!

Cheers
Max

Hi Max,

Thanks alot, this will be a great help for me. Below is the code for my form very stripped down.

<label class="cf_label">Rider 1</label>

<select name="rider_3" size="1" id="rider_1" class="cf_inputbox validate-selection">

<option value="SELECT3" selected="selected">--select a rider--</option>
<option value="1	ATHERTON Rachel 	£120000">1	ATHERTON Rachel 	£120000</option>
<option value="2	JONNIER Sabrina 	£110000">2	JONNIER Sabrina 	£110000</option>
<option value="3	MOSELEY Tracy 	£105000">3	MOSELEY Tracy 	£105000</option>

</select>

<label class="cf_label">Rider 2</label>

<select name="rider_4" size="1" id="rider_2" class="cf_inputbox validate-selection">

<option value="SELECT4" selected="selected">--select a rider--</option>
<option value="1	ATHERTON Rachel 	£120000">1	ATHERTON Rachel 	£120000</option>
<option value="2	JONNIER Sabrina 	£110000">2	JONNIER Sabrina 	£110000</option>
<option value="3	MOSELEY Tracy 	£105000">3	MOSELEY Tracy 	£105000</option>

</select>

__________________

So basically a user is presented with 2 drop down boxes. each contains the same list of riders. so they may choose the same rider twice if they wish. The part that I want to be added up is the total cost of the 2 selected riders which is at the end of each option value.

....so for in the example above, if the user selects:
"1 ATHERTON Rachel £120000" for rider 1 and
"3 MOSELEY Tracy £105000"

the total to display in a separate text box would be £225000 or just "225000."

I hope i have explained everything well enough and thankyou for the help. It's much appreciated.

Sam.

Hi,

we can make it like this:

    <label class="cf_label">Rider 1</label>

    <select name="rider_3" size="1" id="rider_1" class="cf_inputbox validate-selection">

    <option value="SELECT3" selected="selected">--select a rider--</option>
    <option value="1   ATHERTON Rachel    £120000">1   ATHERTON Rachel    £120000</option>
    <option value="2   JONNIER Sabrina    £110000">2   JONNIER Sabrina    £110000</option>
    <option value="3   MOSELEY Tracy    £105000">3   MOSELEY Tracy    £105000</option>

    </select>

    <label class="cf_label">Rider 2</label>

    <select name="rider_4" size="1" id="rider_2" class="cf_inputbox validate-selection" onChange="sumtotal()">

    <option value="" selected="selected">--select a rider--</option>
    <option value="1   ATHERTON Rachel____120000">1   ATHERTON Rachel    £120000</option>
    <option value="2   JONNIER Sabrina____110000">2   JONNIER Sabrina    £110000</option>
    <option value="3   MOSELEY Tracy____105000">3   MOSELEY Tracy    £105000</option>

    </select>

and we will need to add this to the JS box and make sure mootools is loaded:

function sumtotal(){
var data2 = Array(2);
data2 = $('rider_2').value.split('____');
var total2  = data2[1].toInt();

var data1 = Array(2);
data1 = $('rider_1').value.split('____');
var total1  = data1[1].toInt();

}

alert('total is '+ (total1 + total2));

you will need to have another dropdown with id rider_1, you may enhance this code alittle too

Regards
Max

hi max, this is the code that I know have.

<DIV class=form_item   >
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select a rider</LABEL>
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT *
        FROM `FMTB_riders` ";
    $db->setQuery($query);
    $rows = $db->loadResultArray(4);
    
    ?>
    
    <SELECT id="rider1" size="1" name="rider1" class="cf_inputbox validate-selection">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
   </DIV>
<DIV class=clear > </DIV>
</DIV>
   
       <DIV class=form_item   >
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select rider 2</LABEL>    <SELECT id="rider2" size="1" name="rider2" class="cf_inputbox validate-selection" onChange="sumtotal()">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
   
   
   
</DIV>
<DIV class=clear > </DIV></DIV>

and in the javascript:

function sumtotal(){
var data2 = Array(2);
data2 = $('rider2').value.split(',');
var total2  = data2[1].toInt();

var data1 = Array(2);
data1 = $('rider11').value.split(',');
var total1  = data1[1].toInt();

}

alert('total is '+ (total1 + total2));

also mootools is loaded in my template but im not getting any alert after selecting 2 riders.
you can see the form here (removed link)

Hi smappler,

There's a problem with a little JavaScript snippet that ChronoForms loads to call the validation - on your page it looks like this

<script type="text/javascript">
function formCallback(result, form) {
    window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('ChronoContact_', {immediate : true, useTitles : true, onFormValidate : formCallback});
</script>

In the last line where it says ChronoContact_ it should be ChronoContact_fant3

I have no idea why the form name is missing - I haven't seen this before.

Bob

Hi smappler,

As Bob said there is a problem and so no JS will work after the error, try to disable the validation to test my code before you look into this issue!

Regards
Max

hi, Ive looked at my page source and yes you are right, unfortunately i havnt enabled any validation. ( i assume this is in the validation tab of the form - switched off)
I noticed a small error in the javascript "rider11" instead of "rider1" however this still made no difference. I tried upgrading to the new rc2 and this hasnt solved the issue either.

The new form i created in RC2 is at (removed link)

would you taking a look at my form backend be any help? i.e make you a username and pass?

thanks for your continued help with this,

Sam.

try to disable the "load Chronoforms files" in the General tab too!

Max

yup...I tried that before aswell..hehe.

I mean make sure "load files" and Validation are disabled so the JS error doesn't happen and you can try my code, did you try this ?

Cheers,
Max

yeh sorry max Ive disabled both of those and still no joy. Ive PM'd you a username and pass if you want to take a look. thanks again.

I fixed 2 small issues and it works now upon changing the second dropdown value, you can play with it but be careful for any change!

I suggest you install Firefox + Firebug which will help you much!

Regards
Max

ahh thats great max, Yeh ive been using firebug but couldn't get it to bring up any errors apart from it not defining the second total in the javascript. I noticed that there was no curly bracket after the 'alert' aswell. Oh well🙂 thankyou very much....Ive made some changes to my form which you can see here:
(removed link)
you'll need to login to see the form:
UN: test
PW: leeb4ron

as you can see the form now changes the value of a textbox. this works in safari but i cant get it to work in firefox. in firebug all the variables are being made theyre just not writing to the textbox value.
this is the new JS and HTML:

{reg}
<?php
// Get user-information from Joomla
$user = &JFactory::getUser();
?>
<p>
<div class="form_item"><div class="form_element cf_textbox"><label class="cf_label" for="name">Name:</label><input type="text" readonly="readonly"  name="name" id="name" size="20"
maxlength="40" value="<?= $user->name; ?>" /><a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Name :: this is auto-filled from your profile!</div></div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" for="username">DHP Username:</label><input type="text" readonly="readonly"  name="username" id="username" size="20"
maxlength="40" value="<?= $user->username; ?>" /><a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Username :: this is auto-filled from your profile!</div>
</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" for="email">Email:</label><input type="text" name="email" id="email" size="20"
maxlength="40" value="<?= $user->email; ?>" /><a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Email :: Enter your email address, we will contact you with this address if you win so make sure it's right!</div>
</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" for="teamname">Team Name:</label><input type="text" name="teamname" id="teamname" size="20"
maxlength="40"  /><a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Team Name :: Enter a name for your DH team</div>
</div>
</div>
</p><hr>
<p>
<div class="form_item">
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select a rider</LABEL>
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT *
        FROM `FMTB_riders` ";
    $db->setQuery($query);
    $rows = $db->loadResultArray(4);
    
    ?>
    
    <SELECT id="rider1" size="1" name="rider1" class="cf_inputbox validate-selection" onChange="sumtotal()">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
   </DIV>
<DIV class="clear" > </DIV>
</DIV>
   
       <div class="form_item">
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select rider 2</LABEL>
<SELECT id="rider2" size="1" name="rider2" class="cf_inputbox validate-selection" onChange="sumtotal()">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
    
    
   </DIV>
<DIV class="clear" > </DIV>
</DIV>

 <div class="form_item">
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select rider 3</LABEL>
<SELECT id="rider3" size="1" name="rider3" class="cf_inputbox validate-selection" onChange="sumtotal()">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
    
    
   </DIV>
<DIV class="clear" > </DIV>
</DIV>


       <div class="form_item">
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >select rider 4</LABEL>    <SELECT id="rider4" size="1" name="rider4" class="cf_inputbox validate-selection" onChange="sumtotal()">
    <?php
foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
}
    ?>
    </select>
    
    
   </DIV>
<DIV class="clear" > </DIV>
</DIV>

<div class="form_item">
<DIV class="form_element cf_textbox" ><LABEL class=cf_label >Cost £</LABEL>    
<input type="text" name="cost" id="cost" value="0"  />

</DIV>
<DIV class="clear" > </DIV></DIV>

<div class="form_item">
<DIV class="form_element cf_button" ><INPUT type="submit" name="submit" value="Submit my team!">
</div>
<DIV class="clear" > </DIV></DIV>
</p>
{/reg}

function sumtotal(){
var data4 = Array(2);
data4 = $('rider4').value.split(',');
var total4  = data4[1].toInt();
	
var data3 = Array(2);
data3 = $('rider3').value.split(',');
var total3  = data3[1].toInt();
	
var data2 = Array(2);
data2 = $('rider2').value.split(',');
var total2  = data2[1].toInt();

var data1 = Array(2);
data1 = $('rider1').value.split(',');
var total1  = data1[1].toInt();

cost.value = total1 + total2 + total3 +total4;

}

thanks.

Hi smappler,

The form has the same JavaScript error resulting from a missing or blank form name somewhere . . .

Bob

Hi,

cost is undefined, you must add:

$('cost').value = total1 + total2 + total3 +total4;

regarding the missing form name, you have some PHP code in your form code which uses the variable rows, please change the variable name to anything else!

Cheers
Max

Hi both,

Good thinking Max, I missed that - it's $rows = $db->loadResultArray(4);

Bob

Hi Bob,

Well, sometimes I find things easier when I'm tired! I think that because all what I'm thinking about is sleeping!😀

Regards,
Max

awesome, thanks guys. now....😀 .

function sumtotal(){
var data4 = Array(2);
data4 = $('rider4').value.split(',');
var total4  = data4[2].toInt();
	
var data3 = Array(2);
data3 = $('rider3').value.split(',');
var total3  = data3[2].toInt();
	
var data2 = Array(2);
data2 = $('rider2').value.split(',');
var total2  = data2[2].toInt();

var data1 = Array(2);
data1 = $('rider1').value.split(',');
var total1  = data1[2].toInt();

$('cost').value = total1 + total2 + total3 +total4;

}

from my understanding and looking at your code above: the javascript splits the text from the database wherever there is a ',' so ive added more commas into the text in the database and changed the JS above to get the right portion of the text which i think will help for the next part. As I mentioned in another thread I want to display the text in the dropdown differently instead of the raw data from the DB like so.

example data in DB: 12,John Smith,40000
and in the drop down I want it to display as "12 John Smith £40000"

I assume this is quite simple and I thought I could figure it from what I already had but without success. Could you give me a hint 🙂

thanks,
Sam.

Hi Smappler,

Not sure where you've got to with the $row renaming so this html has it done,. I've also changed the driver display formatting and added null options at the start of each selection:

<?php
// Get user-information from Joomla
$user = &JFactory::getUser();
?>
<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" for="name">Name:</label>
		<input type="text" readonly="readonly"  name="name" id="name" size="20"
maxlength="40" value="<?= $user->name; ?>" />
		<a class="tooltiplink" onclick="return false;">
			<img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/>
		</a>
      <div class="tooltipdiv">Name :: this is auto-filled from your profile!</div>
   </div>
   <div class='clear'> </div>
</div>
<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" for="username">DHP Username:</label>
		<input type="text" readonly="readonly"  name="username" id="username" size="20"
maxlength="40" value="<?= $user->username; ?>" />
		<a class="tooltiplink" onclick="return false;">
			<img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/>
		</a>
      <div class="tooltipdiv">Username :: this is auto-filled from your profile!</div>
	</div>
	<div class='clear'> </div>
</div>
<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" for="email">Email:</label>
		<input type="text" name="email" id="email" size="20"
maxlength="40" value="<?= $user->email; ?>" />
		<a class="tooltiplink" onclick="return false;">
			<img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/>
		</a>
      <div class="tooltipdiv">Email :: Enter your email address, we will contact you with this address if you win so make sure it's right!</div>
	</div>
	<div class='clear'> </div>
</div>
<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" for="teamname">Team Name:</label>
		<input type="text" name="teamname" id="teamname" size="20"
maxlength="40"  />
		<a class="tooltiplink" onclick="return false;">
			<img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/>
		</a>
      <div class="tooltipdiv">Team Name :: Enter a name for your DH team</div>
    </div>
	<div class='clear'> </div>
</div>
<div class="form_item">
	<div class="form_element cf_dropdown" >
		<label class=cf_label >select a rider</label>
<?php
/*    $db =& JFactory::getDBO();
    $query = "
      SELECT *
        FROM `FMTB_riders` ";
$db->setQuery($query);
$rows2 = $db->loadResultArray(4);*/
$rows2 = array('12,John Smith,40000', '16,Mike Brown,2000', '22,Henry Higgins,22000', '99,The Man,100');
?>
		<select id="rider1" size="1" name="rider1" class="cf_inputbox validate-selection" onChange="sumtotal()">
			<option value=''>~~?~~</option>
<?php
	foreach ($rows2 as $row) {
      $text = explode(',', $row);
      echo "<option value='$row'>".$text[0]." ".$text[1]." £".number_format($text[2])."</option>";
	}
?>
		</select>
   </div>
	<div class="clear" > </div>
</div>
<div class="form_item">
	<div class="form_element cf_dropdown" >
		<label class=cf_label >select rider 2</label>
		<select id="rider2" size="1" name="rider2" class="cf_inputbox validate-selection" onChange="sumtotal()">
			<option value=''>~~?~~</option>
<?php
	foreach ($rows2 as $row) {
      $text = explode(',', $row);
      echo "<option value='$row'>".$text[0]." ".$text[1]." £".number_format($text[2])."</option>";
	}
?>
    	</select>
  	</div>
	<div class="clear" > </div>
</div>
<div class="form_item">
	<div class="form_element cf_dropdown" >
		<label class=cf_label >select rider 3</label>
			<select id="rider3" size="1" name="rider3" class="cf_inputbox validate-selection" onChange="sumtotal()">
				<option value=''>~~?~~</option>
			<?php
	foreach ($rows2 as $row) {
      $text = explode(',', $row);
      echo "<option value='$row'>".$text[0]." ".$text[1]." £".number_format($text[2])."</option>";
	}
?>
		</select>
	</div>
	<div class="clear" > </div>
</div>
<div class="form_item">
	<div class="form_element cf_dropdown" >
		<label class=cf_label >select rider 4</label>
		<select id="rider4" size="1" name="rider4" class="cf_inputbox validate-selection" onChange="sumtotal()">
			<option value=''>~~?~~</option>
<?php
	foreach ($rows2 as $row) {
      $text = explode(',', $row);
      echo "<option value='$row'>".$text[0]." ".$text[1]." £".number_format($text[2])."</option>";
	}
?>
		</select> 
   </div>
	<div class="clear" > </div>
</div>
<div class="form_item">
	<div class="form_element cf_textbox" >
		<label class=cf_label >Cost £</label>   
   	<input type="text" name="cost" id="cost" value="0"  />
	</div>
	<div class="clear" > </div>
</div>
<div class="form_item">
	<div class="form_element cf_button" >
		<input type="submit" name="submit" value="Submit my team!">
	</div>
	<div class="clear" > </div>
</div>

and this JavaScript does the totals

function sumtotal() 
{
  var data = new Array();
  var total = 0;
  for ( var i = 1; i <= 4; i++ ) {
    data = $('rider'+i).value.split(',');
    if ( data != '' ) {
      total  += data[2].toInt();
    }
  }
  $('cost').value = total;
}

Bob

I have combo boxes that displays names from my database where country=x . Within my database i have another field set for wages. my database is named test for the time being.

How would i edit the above javascript so that is shows the the wage of name selected, i.e.

You pick name "y" on the drop down list
I want to have a text box that will display the wage for "y" via the onchange command

here is the code i have for the one combobox (based on another thread). There are 22 of these

<DIV class=form_item   >
<DIV class="form_element cf_dropdown" ><LABEL class=cf_label >selection 1</LABEL>
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT *
        FROM #__test WHERE country='AUS' ";
    $db->setQuery($query);
    $rows = $db->loadResultArray(1);
    ?>
   
    <SELECT class="cf_inputbox validate-selection" id=select_3 size=3 name=player1 >
    <?php
    foreach ($rows as $row => $current) {
      echo "<option value='$row'>$current</option>";
}
    ?>
    </select>
   
</DIV>

Hi deltronzero,

Let me make sure that I understand this correctly. In your database you have records with 'country, wage' in each record and you want to display the wage in a textbox when the country is selected in a drop-down?

When you say you have 22 of these - are these 22 different tables - the same table 22 different times . . . ?

Bob

PS Your code looks OK except that using $rows & $row causes conflicts with ChronoForms at the moment :-( You can use anything else $t_rows & $t_row (table row) for example.

Hi Bob

Thanks for the reply and the tip with the code.

I currently have one table (called test at the moment) which has 3 fields currently: Name, Wage, Country. The database has roughly 200 entries assigned across 18 countries.

The current drop down boxes (of which there are 22) list the available choices by country, i.e.
Drop down box 1 has the names for people who live in Country 1
Drop down box 2 has the names for people who live in country 2
etc.

What i want to display in the text box is the wage for each drop down box (so there would be 22 of these also), based upon the name selected. At the end i will have a box that sums these text boxes to show a total wage.

I hope that makes more sense

i think that you need to use this code but edit i <= 4 to i <= 22 so you get all the dropdowns! pay attention to the textarea field name and the dropdowns (combos) names AND ids!

    function sumtotal()
    {
      var data = new Array();
      var total = 0;
      for ( var i = 1; i <= 4; i++ ) {
        data = $('rider'+i).value.split(',');
        if ( data != '' ) {
          total  += data[2].toInt();
        }
      }
      $('cost').value = total;
    }

Cheers
Max

thanks max.

the code you posted covers the total sum of the text boxes that would contain the wages for each, but what code would i need to use to autofill a text box with the wage for each name selected:

e.g
I select Name A in combobox 1 from my database
In text box 1 i want to display the wage for Name A, but i will need to get this from my database.

is it as simple as doing a db query based upon the data for combo box 1 or does it need to be a javascript function

Hi deltronzero,

If you have only a few hundred entries in your database it's probably going to be simplest to get them all and drop them into the form html. You can list the countries and names in select boxes, then drop the corresponding wages into JavaScript arrays (one for each select box) and use a script to display the value when an option is selected.

You could also use AJAX but you'd be making 22 database calls as the page is completed and this just feels more than is needed (though if you had 10,000 database records it might be more practical).

Bob

Hi Bob

The more i think about it, the more i think you are probably right. With only a couple of hundred choices it is probably easier to use an array and code similar to the OP's.

Thanks everyone for your help!