order form with selects - dynamic price change

[elem]

Hi guys,

I'm trying to create a dynamic order form with multiple selects, each one containing different product add-on with its individual price. After selecting each add-on I want a price to change dynamically. I've managed to create 1 select that is updating the price as it should, but I don't know how can I have more of them. Here is my code so far:

function recalculate(formObj) {
   var total = 200;

   for (var i=0; i<formObj.item.length; i++) {
      var myItem = formObj.item[i];
      if (myItem.selected) {
         total += parseFloat(myItem.value);
		 
      }
   }
   
   formObj.total.value = total;
}

HTML:

<form method="post" name="order" action="order.php" onsubmit="return false;">
                        
                        <label for="topper">Topper</label>
                        <select name="item" id="topper" onchange="recalculate(this.form)">
                        	<option value="0">No topper</option>
                            <option value="35">Novelty Bride & Groom Set (+€35.00)</option>
                            <option value="20">Waltzing B&G (+€20.00)</option>
                            <option value="20">Jewellery Black (+€20.00)</option>
                        </select>
                       
                        <p>
                           Total: &euro; <input type="text" name="total" id="total" size="10" value="200.00">
                        </p>
                        </form>

But when I'm trying to add another select it breaks the whole thing. Any ideas please?

[niralsoni]

I have modified your code slightly...

	<form method="post" name="order" action="order.php" onsubmit="return false;">
	
	<label for="topper">Topper1</label>
	<select name="item" id="topper" onchange="recalculate(this)">
		<option value="0">No topper</option>
			<option value="35">Novelty Bride & Groom Set (+€35.00)</option>
			<option value="20">Waltzing B&G (+€20.00)</option>
			<option value="20">Jewellery Black (+€20.00)</option>
	</select>
	<label for="topper">Topper2</label>
	<select name="item" id="topper" onchange="recalculate(this)">
		<option value="0">No topper</option>
			<option value="45">Novelty Bride & Groom Set (+€45.00)</option>
			<option value="30">Waltzing B&G (+€30.00)</option>
			<option value="30">Jewellery Black (+€30.00)</option>
	</select>
	<label for="topper">Topper3</label>
	<select name="item" id="topper" onchange="recalculate(this)">
		<option value="0">No topper</option>
			<option value="55">Novelty Bride & Groom Set (+€55.00)</option>
			<option value="40">Waltzing B&G (+€40.00)</option>
			<option value="40">Jewellery Black (+€40.00)</option>
	</select>
 
	<p>
		 Total: &euro; <input type="text" name="total" id="total" size="10" value="200.00">
	</p>
	</form>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		function recalculate(obj) {
			var total = 200;
			var objs = document.getElementsByName('item');
			for(var i = 0; i < objs.length; i++) {
				total += parseFloat(objs[i].value);
			}
			obj.form.total.value = total;
		}
//-->
	</SCRIPT>

Hope it may help you out...

Thanks & Regards,
Niral Soni

[elem]

thanks but it doesn't work either ....

[niralsoni]

it is working in my system..

please share your code, what you have written..

Thanks & Regards,
Niral Soni

[elem]

Thanks for your response Niral. Here's the code I have:

<form method="post" name="order" action="order.php" onsubmit="return false;">
                    	<label for="topper">Tier 1</label>
                        <select name="item" id="tier1" onchange="recalculate(this.form)">
                        	<option value="0">Please choose</option>
                            <option value="70">Lemon Maderia c/w Buttercream (+€70.00)</option>
                            <option value="70">Carrot Cake c/w Buttercream (+€70.00)</option>
                            <option value="70">Chocolate Sponge c/w Buttercream (+€70.00)</option>
                            <option value="90">Milk Chocolate Biscuit (+€90.00)</option>
                            <option value="90">Dark Chocolate Biscuit (+€90.00)</option>
                            <option value="55">Fake (+€55.00)</option>
                        </select>
                        <br />
                        
                        <label for="topper">Tier 2</label>
                        <select name="item" id="tier2" onchange="recalculate(this.form)">
                        	<option value="0">Please choose</option>
                            <option value="55">Lemon Maderia c/w Buttercream (+€55.00)</option>
                            <option value="55">Carrot Cake c/w Buttercream (+€55.00)</option>
                            <option value="55">Chocolate Sponge c/w Buttercream (+€55.00)</option>
                            <option value="70">Milk Chocolate Biscuit (+€70.00)</option>
                            <option value="70">Dark Chocolate Biscuit (+€70.00)</option>
                            <option value="35">Fake (+€35.00)</option>
                        </select>
                        <br />
                        
                        <label for="topper">Tier 3</label>
                        <select name="item" id="tier3" onchange="recalculate(this.form)">
                        	<option value="0">Please choose</option>
                            <option value="55">Lemon Maderia c/w Buttercream (+€55.00)</option>
                            <option value="55">Carrot Cake c/w Buttercream (+€55.00)</option>
                            <option value="55">Chocolate Sponge c/w Buttercream (+€55.00)</option>
                            <option value="70">Milk Chocolate Biscuit (+€70.00)</option>
                            <option value="70">Dark Chocolate Biscuit (+€70.00)</option>
                            <option value="35">Fake (+€35.00)</option>
                        </select>
                        <br />
                        
                        <label for="topper">Tier 4</label>
                        <select name="item" id="tier4" onchange="recalculate(this.form)">
                        	<option value="0">Please choose</option>
                            <option value="35">Lemon Maderia c/w Buttercream (+€35.00)</option>
                            <option value="35">Carrot Cake c/w Buttercream (+€35.00)</option>
                            <option value="35">Chocolate Sponge c/w Buttercream (+€35.00)</option>
                            <option value="50">Milk Chocolate Biscuit (+€50.00)</option>
                            <option value="50">Dark Chocolate Biscuit (+€50.00)</option>
                            <option value="15">Fake (+€15.00)</option>
                        </select>
                        <br />
                        
                        <label for="topper">Topper</label>
                        <select name="item" id="topper" onchange="recalculate(this.form)">
                        	<option value="0">No topper</option>
                            <option value="35">Novelty Bride & Groom Set (+€35.00)</option>
                            <option value="20">Waltzing B&G (+€20.00)</option>
                            <option value="20">Jewellery Black (+€20.00)</option>
                        </select>
                        <input type="hidden" name="data" value="1" />
                       
                        <p>
                           Your Total: &euro; <input type="text" name="total" id="total" size="10" value="200.00">
                        </p>
                        </form>
<script type="text/javascript">
<!--

function recalculate(obj) {
			var total = 200;
			var objs = document.getElementsByName('item');
			for(var i = 0; i < objs.length; i++) {
				total += parseFloat(objs[i].value);
			}
					
			obj.form.total.value = total;
		}
		
// -->
</script>

[Lycran]

i'm all new to Javascripting, but i love "where's waldo?".

here is the difference between your code and Niralsoni's:
yours:

... onchange="recalculate(this.form)">

Niralsoni's:

... onchange="recalculate(this)">

[DaveyErwin]

Here ya go ...

function recalculate(frm) {
			var total = 200;
			var els = frm.elements;    
			for(var i = els.length; i --;) {
			    if(els[i].name=="item")
				total += parseFloat(els[i].value);				
			}					
			frm.total.value = total;
		}

No need to change the HTML with the above code,
onchange="recalculate(this.form)" is just fine.

[elem]

Thanks guys. Silly me, didn't spot that. All working perfectly now

Davey - thanks a lot for that as well, that's 100% too.

Now when I have the experts here - one more quick question - would it be fairly easy to have that dynamic price passed back to normal text instead of having it in the textbox ? I just thought of it now, just that no one can change the price manually afterwards ?

Thanks for all of your help

[niralsoni]

replace your textbox with a div as -

<div id="Total" >200.00</div>

then replace the frm.total.value with -

document.getElementById('Total').innerHTML = total;

[elem]

That's great Niral, thanks very much for all your help. Let me know if there's any way I can buy you a beer!

[elem]

guys, how do I pass the text from the option to php so it updates hidden input's value so I can then process the form through php ? or maybe just simply send the value to next page with GET instead of POST ?

in other words, I wanna be able to retrieve the option user has chosen (for example "Novelty Bride & Groom Set (+€35.00)"' from the last select - topper) and pass it to the PHP ?

so, for instance, from this select:

<label for=\"topper\">Topper</label>
								<select name=\"item\" id=\"topper\" onchange=\"recalculate(this)\">
									<option value=\"0\">No topper</option>
									<option value=\"35\">Novelty Bride & Groom Set (+€35.00)</option>
									<option value=\"20\">Waltzing B&G (+€20.00)</option>
									<option value=\"20\">Jewellery Black (+€20.00)</option>
								</select>

Pass the "Novelty Bride & Groom Set (+€35.00)" part to js - this is what i've tried:

document.getElementById('topp_final').innerHTML = document.getElementById('topper').value;

and wanted to pass it to that input:

<input type=\"hidden\" name=\"topper\" id=\"topp_final\" value=\"\">

but:

1. i've only realised that it will pass "35", not the actual text from the option (is there any way to do it?)

2. it doesn't paste the value to the hidden input as it should ($_POST['topp_final'] is empty, so there's something wrong on the js side

any chance someone could help me, sorry to be such a pain in the a** but javascript is not really mi thing, PHP is so much easier ...

[xelawho]

If I understand your form correctly, I think you are looking for something like this:

document.getElementById('topp_final').innerHTML =document.order.topper.options[document.order.topper.selectedIndex].text

or maybe this:

document.getElementById('topp_final').innerHTML =document.forms[0].topper.options[document.forms[0].topper.selectedIndex].text

which seems to be the same thing, but I could be wrong...

but then maybe someone can explain why doing this:

var sel=document.getElementById('topper');
document.getElementById('topp_final').innerHTML=sel.options[sel.selectedIndex].text;

is "wrong" when it seems to be simpler, and works on initial testing...

[elem]

thank you xelawho! this line did the trick:

obj.form.topp_final.value = document.order.topper.options[document.order.topper.selectedIndex].text;

thanks again