Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post

    order form with selects - dynamic price change

    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:

    Code:
    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:

    Code:
    <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?

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    I have modified your code slightly...

    Code:
    	<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

  • Users who have thanked niralsoni for this post:

    elem (09-13-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    thanks but it doesn't work either ....

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    it is working in my system..

    please share your code, what you have written..

    Thanks & Regards,
    Niral Soni

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    Thanks for your response Niral. Here's the code I have:


    Code:
    <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>

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Belgium
    Posts
    1
    Thanks
    0
    Thanked 2 Times in 1 Post
    i'm all new to Javascripting, but i love "where's waldo?".

    here is the difference between your code and Niralsoni's:
    yours:
    Code:
    ... onchange="recalculate(this.form)">
    Niralsoni's:
    Code:
    ... onchange="recalculate(this)">

  • The Following 2 Users Say Thank You to Lycran For This Useful Post:

    elem (09-13-2011), niralsoni (09-13-2011)

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Here ya go ...

    Code:
    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.
    Last edited by DaveyErwin; 09-13-2011 at 03:05 PM.

  • Users who have thanked DaveyErwin for this post:

    elem (09-13-2011)

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    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

  • #9
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    replace your textbox with a div as -
    Code:
    <div id="Total" >200.00</div>
    then replace the frm.total.value with -
    Code:
    document.getElementById('Total').innerHTML = total;

  • Users who have thanked niralsoni for this post:

    elem (09-13-2011)

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post

    Smile

    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!

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    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:

    Code:
    <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:

    Code:
    document.getElementById('topp_final').innerHTML = document.getElementById('topper').value;
    and wanted to pass it to that input:

    Code:
    <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 ...
    Last edited by elem; 09-15-2011 at 08:32 PM.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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:

    Code:
    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...
    Last edited by xelawho; 09-15-2011 at 09:30 PM. Reason: added question

  • Users who have thanked xelawho for this post:

    elem (09-15-2011)

  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post

    Thumbs up

    thank you xelawho! this line did the trick:

    Code:
    obj.form.topp_final.value = document.order.topper.options[document.order.topper.selectedIndex].text;
    thanks again


  •  

    Posting Permissions

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