...

View Full Version : Auto update total values from form



lukep11a
07-04-2012, 09:25 PM
Hi I have some javascript that I am trying to adapt to give the remaining budget from a set value as the user makes selections from a form.


<script type="text/javascript">
$(document).ready(function()
{
var total = 5500;

function calcTotal()
{
$("input:checked").each(function()
{
//This happens for each checked input field
var value = $(this).attr("id");
total -= parseInt(value);
});
}

//This happens when the page loads
calcTotal();
$(":submit").before('<p class="total">REMAINING</p><p class="total-value">' + total + 'm</p>');

$("input:checkbox, input:radio").click(function()
{
total = 5500;
calcTotal();
$("p.total").html("REMAINING</p><p class='total-value'>" + total + "m</p>");
});
});
</script>

The form start out as it should with "REMAINING 5500m" but then when I start making selections from the form I am getting "REMAINING 4640m 5500m" for example. Does anybody know why this is. It was working fine until I started trying to style up my page.

This is the part of the form where I want it to be entered:


<div id="budget">
<div><p class="budget">BUDGET</p><p class="budget-value">5500m</p></div>
</div>
<div id="submit">
<input type="submit" value="Submit Team" class="button">
</div>

I would like it to insert it like this if possible:


<div id="budget">
<div><p class="budget">BUDGET</p><p class="budget-value">5500m</p></div>
<div><p class="total">BUDGET</p><p class="total-value">5500m</p></div>
</div>
<div id="submit">
<input type="submit" value="Submit Team" class="button">
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum