need help calculating a form subtotal from options maybe using jquery to do it?

This site is best viewed in a modern browser with JavaScript enabled.

need help calculating a form subtotal from options maybe using jquery to do it?

BWWebDesigns

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

tenfold

Try this (non-jQuery).

http://pastebin.com/0ggNyH3Y

I didn't modify the html at all, but it could be simplified a little more if IDs were used on certain elements.

Padonak

try this

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>subtotal</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

function calcsubtotal(){
var a = Number($('#qty').val()),
b = $('#productpr').val().split(','),
price = b[1].split(":");
$('#subtotal').html('<b>$' + a * Number(price[1]) + '.00</b>');
}

$('#productpr,#qty').change(calcsubtotal);
calcsubtotal();
});
</script>
</head>
<body>
<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" id="productpr" style="width:370px;">
   <option value="Mattress Name, Option 1 Name:150:0:1:1234567890">Mattress Name, Option 1 Name - $150</option>
   <option value="Mattress Name, Option 2 Name:200:0:2:1234567890">Mattress Name, Option 2 Name - $200</option>
   <option value="Mattress Name, Option 3 Name:250:0:3:1234567890">Mattress Name, Option 3 Name - $250</option>
   <option value="Mattress Name, Option 4 Name:300: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" id="qty" type="text" value="1" 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>$150.00</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>
</body>
</html>

BWWebDesigns

I tried your code above (Padonak) and seems to work just fine, thanks

tenfold

lol so you didn't try mine. great. glad I put that work in.

Padonak

tenfold, both our codes can be used only as a draft, because there was no any attention payed to the text-box entered value filtering, so we can easily get $NaN in case the entered value has letters or other "wrong" chars. And please do not think that your work was done in vain. Even if the topic starter said nothing about your code, many others could check it and use for solving their problems. Thank you very much for participation and please keep it on.

tenfold

That is true. That stuff just bugs me. I'm sorry. At least there is a jQuery and non-jQuery way to achieve the goal.