...

View Full Version : order form with selects - dynamic price change



elem
09-12-2011, 09:35 PM
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
09-12-2011, 09:48 PM
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
09-12-2011, 11:28 PM
thanks but it doesn't work either ....

niralsoni
09-13-2011, 01:03 AM
it is working in my system..

please share your code, what you have written..

Thanks & Regards,
Niral Soni

elem
09-13-2011, 03:01 AM
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
09-13-2011, 11:57 AM
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
09-13-2011, 12:34 PM
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
09-13-2011, 03:07 PM
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
09-13-2011, 03:55 PM
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
09-13-2011, 07:36 PM
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
09-15-2011, 09:20 PM
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
09-15-2011, 09:53 PM
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
09-16-2011, 12:36 AM
thank you xelawho! this line did the trick:



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

thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum