www.webdeveloper.com
Results 1 to 5 of 5

Thread: Getting form to total - amendment help

  1. #1
    Join Date
    May 2013
    Posts
    3

    Getting form to total - amendment help

    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 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
    Join Date
    May 2013
    Posts
    15
    If you can put the form on an online web server, I will try to give you a little help. Only the form!!!

  3. #3
    Join Date
    May 2013
    Posts
    3
    Quote Originally Posted by noreplace View Post
    If you can put the form on an online web server, I will try to give you a little help. Only the form!!!
    Thanks. This is the location of the form: http://www.cybibikes.co.uk/book-now

    I thought I'd managed to sort it out yesterday only to discover this morning that it doesn't work in IE!? Any ideas?

    Here's the script:
    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","Product60","Product70","Product80");
    var extraday = new Array("extra10","extra20","extra30","extra40","extra50","extra60","extra70","extra80");
    	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>

  4. #4
    Join Date
    May 2013
    Posts
    15
    Great to hear you sort it out. which ie version are you using ? It works perfect here. I'm using ie 9.

  5. #5
    Join Date
    May 2013
    Posts
    3
    Yeah should be working in IE now. A mate pointed out that IE didn't like the fact that 'Days' was undefined.

    Changed formula to:

    Code:
    total = total + ((parseInt(document.getElementById(products[i]).value) + (parseInt(document.getElementById('extra'+(i+1)).value) * (parseInt(document.getElementById('Days').value) - 1))) * parseInt(document.getElementById('QuantityProd'+(i+1)).value));

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles