SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form options totalling - works but need help amending.

    Hi Guys,

    Let me start by saying I know nothing about scripting - I know HTML and CSS and that's about it.

    I'm looking for help amending a form to build in an extra complexity.

    I have a form now where the user can select a number of different bikes for hire, they can select how many bikes of each type they want and they can select how many days hire they want.

    This then totals the cost. It works. I took the code from here: http://www.rsjoomla.com/blog/view/55...al-part-3.html


    However, my client has complicated things for me. The cost of the products drops after the first day. So Product1 is 15 for one day and 10 each day after that.

    As Product1 is a check box with a value of: 15|1 Day - 15 I figured I could just add some more check boxes - 15| 1 Day 15, 25| 2 Days 25, 35| 2 Days 35 etc etc. But it doesn't like it. Checking a check box other than the first one has no effect.

    even if I could get it to work like that, it is a little clunky. The ideal is that there is still only one checkbox for Product1 and the number of days required and quantity of product1 required are taken from the existing inputs, but the cost (depending on the number of days) is taken from a set of variables somewhere. i.e. If days =1, Product1 = 15, if days > 1 Product1 = 15 + ((days-1)*10).


    Any help VERY gratefully appreciated. Need to launch this site tomorrow (Friday).

    All the code is pretty much as per the link above, but I'll paste below too:

    Code:
    <script type="text/javascript">
    function enableQuantity(prod,quantity)
    {
    	if(document.getElementById(prod).checked)
    		document.getElementById(quantity).disabled = false;
    
    	else
    		document.getElementById(quantity).disabled = true;
    calculateTotal();		
    	
    }
    
    function calculateTotal()
    {
    	
    var products = new Array("Product10","Product20","Product30","Product40","Product50");
    	var i=0;
    	var total = 0;
    	for(i;i<products.length;i++)
    		if(document.getElementById(products[i]).checked)
    		{
    		
    			//alert(document.getElementById("QuantityProd"+(i+1)).value);
    			total  = total + parseInt(document.getElementById(products[i]).value) * parseInt(document.getElementById('QuantityProd'+(i+1)).value) * parseInt(Days.value);
    		}
    	document.getElementById('Total').value = total;
    }
    </script>
    HTML Code:
    <h2>{global:formtitle}</h2>
    {error}
    <!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
    <fieldset class="formHorizontal formContainer" id="rsform_5_page_0">
    	<div class="rsform-block rsform-block-header">
    		<div class="formControlLabel">{header:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{header:body}<span class="formValidation">{header:validation}</span></div>
    		<p class="formDescription">{header:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-firstname">
    		<div class="formControlLabel">{FirstName:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{FirstName:body}<span class="formValidation">{FirstName:validation}</span></div>
    		<p class="formDescription">{FirstName:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-lastname">
    		<div class="formControlLabel">{LastName:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{LastName:body}<span class="formValidation">{LastName:validation}</span></div>
    		<p class="formDescription">{LastName:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-email">
    		<div class="formControlLabel">{Email:caption}<strong class="formRequired">(*)</strong></div>
    		<div class="formControls">
    		<div class="formBody">{Email:body}<span class="formValidation">{Email:validation}</span></div>
    		<p class="formDescription">{Email:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-date">
    		<div class="formControlLabel">{Date:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Date:body}<span class="formValidation">{Date:validation}</span></div>
    		<p class="formDescription">{Date:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-days">
    		<div class="formControlLabel">{Days:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Days:body}<span class="formValidation">{Days:validation}</span></div>
    		<p class="formDescription">{Days:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-hub">
    		<div class="formControlLabel">{Hub:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Hub:body}<span class="formValidation">{Hub:validation}</span></div>
    		<p class="formDescription">{Hub:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-product1">
    		<div class="formControlLabel">{Product1:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Product1:body}<span class="formValidation">{Product1:validation}</span></div>
    		<p class="formDescription">{Product1:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-quantityprod1">
    		<div class="formControlLabel">{QuantityProd1:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{QuantityProd1:body}<span class="formValidation">{QuantityProd1:validation}</span></div>
    		<p class="formDescription">{QuantityProd1:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-product2">
    		<div class="formControlLabel">{Product2:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Product2:body}<span class="formValidation">{Product2:validation}</span></div>
    		<p class="formDescription">{Product2:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-quantityprod2">
    		<div class="formControlLabel">{QuantityProd2:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{QuantityProd2:body}<span class="formValidation">{QuantityProd2:validation}</span></div>
    		<p class="formDescription">{QuantityProd2:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-product3">
    		<div class="formControlLabel">{Product3:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Product3:body}<span class="formValidation">{Product3:validation}</span></div>
    		<p class="formDescription">{Product3:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-quantityprod3">
    		<div class="formControlLabel">{QuantityProd3:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{QuantityProd3:body}<span class="formValidation">{QuantityProd3:validation}</span></div>
    		<p class="formDescription">{QuantityProd3:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-product4">
    		<div class="formControlLabel">{Product4:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Product4:body}<span class="formValidation">{Product4:validation}</span></div>
    		<p class="formDescription">{Product4:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-quantityprod4">
    		<div class="formControlLabel">{QuantityProd4:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{QuantityProd4:body}<span class="formValidation">{QuantityProd4:validation}</span></div>
    		<p class="formDescription">{QuantityProd4:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-product5">
    		<div class="formControlLabel">{Product5:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Product5:body}<span class="formValidation">{Product5:validation}</span></div>
    		<p class="formDescription">{Product5:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-quantityprod5">
    		<div class="formControlLabel">{QuantityProd5:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{QuantityProd5:body}<span class="formValidation">{QuantityProd5:validation}</span></div>
    		<p class="formDescription">{QuantityProd5:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-total">
    		<div class="formControlLabel">{Total:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Total:body}<span class="formValidation">{Total:validation}</span></div>
    		<p class="formDescription">{Total:description}</p>
    		</div>
    	</div>
    	<div class="rsform-block rsform-block-submit">
    		<div class="formControlLabel">{Submit:caption}</div>
    		<div class="formControls">
    		<div class="formBody">{Submit:body}<span class="formValidation">{Submit:validation}</span></div>
    		<p class="formDescription">{Submit:description}</p>
    		</div>
    	</div>
    </fieldset>
    
    <script type="text/javascript">
    enableQuantity('Product10','QuantityProd1');
    enableQuantity('Product20','QuantityProd2');
    enableQuantity('Product30','QuantityProd3');
    enableQuantity('Product40','QuantityProd4');
    enableQuantity('Product50','QuantityProd5');
    </script>

    'Additional attributes' on checkboxes (number change with each product of course):
    Code:
    onclick="enableQuantity('Product10','QuantityProd1');"
    'Additional attributes' on quatity drop downs:
    Code:
    onchange="calculateTotal();"
    Thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    // this line does first day
    total = total + parseInt(document.getElementById(products[i]).value) * parseInt(document.getElementById('QuantityProd'+(i+1)).value);
    // this line does the rest of the days
    total = total + parseInt( Your extra day cost here ) * parseInt(document.getElementById('QuantityProd'+(i+1)).value) * (parseInt(Days.value) - 1);

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chetweewax View Post
    // this line does first day
    total = total + parseInt(document.getElementById(products[i]).value) * parseInt(document.getElementById('QuantityProd'+(i+1)).value);
    // this line does the rest of the days
    total = total + parseInt( Your extra day cost here ) * parseInt(document.getElementById('QuantityProd'+(i+1)).value) * (parseInt(Days.value) - 1);

    Thanks for that, but I think I have omitted an important piece of info...the price for the extra days varies by product.

    E.g. Product1 is 15 and 10 per day thereafter, as is Product2, Product3 is 10 and 7 per day thereafter, Products 4 and 5 are 5 per day every day...

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chetweewax View Post
    // this line does first day
    total = total + parseInt(document.getElementById(products[i]).value) * parseInt(document.getElementById('QuantityProd'+(i+1)).value);
    // this line does the rest of the days
    total = total + parseInt( Your extra day cost here ) * parseInt(document.getElementById('QuantityProd'+(i+1)).value) * (parseInt(Days.value) - 1);
    Could/Should I calculate subtotals for each product using your approach above and then sum the subtotals to get the Grand Total?

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you use some sort of hidden input field to store the extra day value?

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, absolutely. Just not sure how that would then be factored in. All the i's and i++ confuse the crap out of me.

  7. #7
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Designer156 View Post
    Could/Should I calculate subtotals for each product using your approach above and then sum the subtotals to get the Grand Total?
    Yes that would be my approach, you could then show the subtotals for each item i.e 3 day rental = 35

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chetweewax View Post
    Yes that would be my approach, you could then show the subtotals for each item i.e 3 day rental = 35
    Great, ok I'll give that a go and report back. Thanks!!

  9. #9
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Designer156 View Post
    Yes, absolutely. Just not sure how that would then be factored in. All the i's and i++ confuse the crap out of me.
    var products = new Array("Product10","Product20","Product30","Product40","Product50");
    var extraday = new Array("extra10","extra20","extra30","extra40","extra50");

    As long as your hidden input name (I am using extraday as example) is in the same sequence as products, the i's while be the same

    So... products[0] = Product10
    extraday[0] = extra10
    products[1] = Product20
    extraday[1] = extra20

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! I think we might be there. Thanks so much!

    Code:
    <script type="text/javascript">
    function enableQuantity(prod,quantity)
    {
    	if(document.getElementById(prod).checked)
    		document.getElementById(quantity).disabled = false;
    
    	else
    		document.getElementById(quantity).disabled = true;
    calculateTotal();		
    	
    }
    
    function calculateTotal()
    {
    	
    var products = new Array("Product10","Product20","Product30","Product40","Product50");
    var extraday = new Array("extra10","extra20","extra30","extra40","extra50");
    	var i=0;
    	var total = 0;
    	for(i;i<products.length;i++)
    		if(document.getElementById(products[i]).checked)
    		{
    		
    			//alert(document.getElementById("QuantityProd"+(i+1)).value);
    			total  = total + ((parseInt(document.getElementById(products[i]).value) + (parseInt(document.getElementById('extra'+(i+1)).value) * (parseInt(Days.value) - 1))) * parseInt(document.getElementById('QuantityProd'+(i+1)).value));
    
    		}
    	document.getElementById('Total').value = total;
    }
    </script>

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no Problem

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. It seems that this doesn't work in IE. I've started a new thread for the issue if anyone has any ideas: http://www.sitepoint.com/forums/show...-working-in-IE

  13. #13
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try changing line
    if(document.getElementById(products[i]).checked)
    to
    if(document.getElementById(products[i]).checked == true)

  14. #14
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually make anything that is .checked to .checked == true


Bookmarks

Posting Permissions

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