Basically a client of mine has a form that has for now one option drop down with multiple options each with their own pricing and a quantity box, the drop downs do not have the price in the value however they have a long string of different info separated by : and the second bit of info is the price as in the example below.
What I need and am trying to create is a script which on page load it would calculate the price based on the first option being selected and quantity field having a 1 in it, the default.
Then anytime the quantity box is changed or the option drop down is changed it would recalculate.
The total would be displayed as a sub total on the page.
The price for each option would need to be split from the rest of the info which is in that option's value before being able to calculate it.
Anyone able to advise how to do this?
I tried a few things but not sure why it wasn't working.
Form Code:
<form action="" method="post">
<input name="userid" type="hidden" value="">
<table id="itemoptions" style="padding-left:10px; padding-right:10px;">
<tr><td><p>1. Select Your Options</p>
<select name="productpr" style="width:370px;">
<option value="Mattress Name, Option 1 Name:[COLOR="#FF0000"]150[/COLOR]:0:1:1234567890">Mattress Name, Option 1 Name - $150</option>
<option value="Mattress Name, Option 2 Name:[COLOR="#FF0000"]200[/COLOR]:0:2:1234567890">Mattress Name, Option 2 Name - $200</option>
<option value="Mattress Name, Option 3 Name:[COLOR="#FF0000"]250[/COLOR]:0:3:1234567890">Mattress Name, Option 3 Name - $250</option>
<option value="Mattress Name, Option 4 Name:[COLOR="#FF0000"]300[/COLOR]:0:4:1234567890">Mattress Name, Option 4 Name - $300</option>
</select></td></tr>
<tr><td><input name="noqty" type="hidden" value="2">
<p>2. Choose A Quantity</p><input name="qty" type="text" [COLOR="#00FF00"]value="1"[/COLOR] size="3"></td></tr>
<tr><td><input name="noqty" type="hidden" value="2">
<p style="float:left; font-size:16px;"><b>Sub-Total:</b></p> <p style="float:right; font-size:16px;" id="subtotal"><b>[COLOR="#DDA0DD"]$150.00[/COLOR]</b></p> </td></tr>
<tr><td align="right"><hr color="#FFFFFF" size="1" /><input type="submit" value="Add To Cart" style="width:80px; height:30px; color:#FFFFFF; background-color:#79C144;"></td></tr>
</table>
<input name="units" type="hidden" value="0">
<input name="return" type="hidden" value="">
</form>
I tried using something I found online but couldn't adapt it to work right as I do not know javascript or jquery well at all.
$('select[name=productpr]').change(calcsubtotal);
$('input[name=qty]').change(calcsubtotal);
function calcsubtotal() {
if ( jQuery('input[name=qty]:visible select').length > 0) {
var a = Number($('input[name=qty]').val());
var b = $('select[name=productpr]:visible select').val();
var price = b.split(":");
var total = a * Number(price[1]);
$('#subtotal').val(total);
}
}
Not my code just trying to update something for someone.
Thanks