Add values of dynamically created drop down boxes

[hyperjase]

I have some drop down boxes which are dynamically created via php, created from a number of either 6, 12, 24 or 36 - also created from a number of check boxes. What I want to do is show the total number of all the drop down boxes (so if there's 3, one is selected 6, one is selected 3 and the third is set to 3 so the total is 12 - so from 3 drop down boxes). It must add all them up and alert if it doesn't match the total value of the drop down boxes (in this case 12).

How would I achieve this on-the-fly with ajax?

Thanks!

Jason

[fobos]

Can you show your code so far, this way we can help out. Right now, we have to imagine what you are trying to achieve and you may get wrong solutions.

[hyperjase]

Here we go - this may get quite indepth!

Here is the code that sets how many numbers within the checkbox (input name="cupcake"), then the two sets underneath are the possible topping options:

<form id="cupmake" method="post" action="?step=2"><table width="80%" align="center">
  <tr> 
  <td valign="top" align="right"> 
    Please select how many you'd like.</td>
    <td align="left" colspan="2">
     <input name="cupcake" type="radio" value="6" checked />6 (£5)<br />
      <input name="cupcake" type="radio" value="12" />12 (£10)<br />
      <input name="cupcake" type="radio" value="24" />24 (£15)<br />
       <input name="cupcake" type="radio" value="36" />36 (£20)
    </td>
    </tr>
    <tr>
    <td colspan="3"><hr /></td>
    </tr>
    <tr>
    <td valign="top" align="right" width="40%">
    Please select the topping.</td><td align="left" valign="top" width="30%">
<input name="topping[]" data-bvalidator="min[1], required" data-bvalidator-msg="Select one or more toppings please" type="checkbox" value="Vanilla" checked />Vanilla<br />
<input name="topping[]" type="checkbox" value="Chocolate" />Chocolate<br />
<input name="topping[]" type="checkbox" value="Choc Orange" />Choc Orange<br />
<input name="topping[]" type="checkbox" value="Baileys" />Baileys<br />
<input name="topping[]" type="checkbox" value="Amaretto" />Amaretto<br />
</td><td align="left" width="30%" valign="top">
<input name="topping[]" type="checkbox" value="Cointreau" />Cointreau<br />
<input name="topping[]" type="checkbox" value="Lemon" />Lemon<br />
<input name="topping[]" type="checkbox" value="Amaretto" />Strawberry<br />
<input name="topping[]" type="checkbox" value="Peppermint" />Peppermint
    </td>
    </tr>
    <tr>
    <td colspan="3"><hr /></td>
    </tr>
    <tr>
    <td valign="top" align="right" width="40%">
    Please select a sweetie topping</td><td align="left" width="30%" valign="top">
<input name="swtopping[]" type="checkbox" value="Lucky Dip" />Lucky Dip<br />
<input name="swtopping[]" type="checkbox" value="Maltesers" />Maltesers<br />
<input name="swtopping[]" type="checkbox" value="Chocolate Orange" />Chocolate Orange<br />
<input name="swtopping[]" type="checkbox" value="Toblerone" />Toblerone<br />
<input name="swtopping[]" type="checkbox" value="Pink Shimmer Sugar" />Pink Shimmer Sugar
</td><td align="left" width="30%" valign="top">
<input name="swtopping[]" type="checkbox" value="Blue Shimmer Sugar" />Blue Shimmer Sugar<br />
<input name="swtopping[]" type="checkbox" value="Chocolate Buttons" />Chocolate Buttons<br />
<input name="swtopping[]" type="checkbox" value="Lovehearts" />Lovehearts (Valentines)<br />
<input name="swtopping[]" type="checkbox" value="Chocolate Mini Eggs" />Chocolate Mini Eggs (Easter)<br />
<input name="swtopping[]" type="checkbox" value="Mini Creme Eggs" />Mini Creme Eggs (Easter)

    </td>
    </tr>   
    <tr>
      <td colspan="3" align="center" height="50px"><input type="submit" value="Next >>" class="submit" />
  </td>  
  </tr><script type="text/javascript"> $(document).ready(function () { $('#cupmake').bValidator(); }); </script>
</table></form>

And then next step is then to display dynamically from the above values, the number of toppings that can be selected (6, 12, 24 or 36). Then for each topping selected with the checkboxes, it creates a drop down that contains the number of cupcakes selected (6, 12, 24 or 36).

<?php
foreach ($_SESSION['topping'] as $value) {
    echo "<tr><td width='30%'>Topping</td><td width='50%'>$value</td><td width='20%'><select name='notopping[$value]'>";
	$counter = 1;
	while ( $counter <= $_SESSION['cupcake'] ) {
	  echo '<option value='.$counter.'>'.$counter.'</option>';
	  $counter++;
}
	echo "</select</td></tr>";
}
echo "<tr><td colspan='3' align='center'>All must add up to ".$_SESSION['cupcake']."</td></tr>";
if (count($_SESSION['swtopping']) > 0) {
?>
<tr>
<td colspan="3">
<br /><br />Please select how many of each type of sweetie topping you would like<br />
</td>
</tr>
<?php
foreach ($_SESSION['swtopping'] as $value) {
    echo "<tr><td width='30%'>Sweetie topping</td><td width='50%'>$value</td><td width='20%'><select name='noswtopping[$value]'>";
	$counter = 1;
	while ( $counter <= $_SESSION['cupcake'] ) {
	  echo '<option name="noswtopping" value="'.$counter.'">'.$counter.'</option>';
	  $counter++;
	}
	echo "</select></td></tr>";
	}
	echo "<tr><td colspan='3' align='center'>All must add up to ".$_SESSION['cupcake']."</td></tr>";
}
?>

What I need to do is create a way of on-the-fly adding a number showing how many toppings have been chosen in the drop down boxes so that is shows if it adds up to the number of cupcakes. Hope that makes it easier to understand.

Thanks!

Jason