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-3-ways-to-create-a-small-joomla-shopping-cart-with-rsformpro-and-paypal-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:
<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>
<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):
onclick="enableQuantity('Product10','QuantityProd1');"
‘Additional attributes’ on quatity drop downs:
onchange="calculateTotal();"
Thanks in advance.