0

I would like the field "sub_total" to update as various fields are changed instead of it updating when one particular field is updated(namely: "add_on")

I have tried adding $(document).ready(function(){ to the top of the code, but it is not calculating at all if i add that.

HTML:

<td>Total Cost Full Day</td>
<input type="text" name="total_full" id="total_full"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>

 <td>Total Cost Half Day</td>
<input type="text" name="total_half" id="total_half"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>


<td>Addon Charge</td>
<input type="text" name="add_on" id="add_on"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>


<td>Sub Total</td>
<input name="sub_total" type="text" id="sub_total" />​

JAVASCRIPT

//Calculate Sub Total


function calculateSubTotal() {

    var SubTotal = +total_full.value + +total_half.value + +add_on.value;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
}


document.getElementById("add_on").onchange = calculateSubTotal;
document.getElementById("add_on").onkeyup = calculateSubTotal;​
1

2 Answers 2

1

You need to be using jQuery to use something like $(document).ready. Otherwise it won't work.

That's my favorite method, but using something like window.onload works as well. See below... I also changed the calculation of your SubTotal. Unless you declared variables called total_full, total_half, and add_on, you still need to get the elements the same way you got them when assigning your events.

window.onload=function(){
//Calculate Sub Total


function calculateSubTotal() {

    var SubTotal = +document.getElementById("total_full").value + +document.getElementById("total_half").value + +document.getElementById("add_on").value;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
}


document.getElementById("add_on").onchange = calculateSubTotal;
document.getElementById("add_on").onkeyup = calculateSubTotal;
document.getElementById("total_full").onchange = calculateSubTotal;
document.getElementById("total_full").onkeyup = calculateSubTotal;
document.getElementById("total_half").onchange = calculateSubTotal;
document.getElementById("total_half").onkeyup = calculateSubTotal;

}
6
  • thank you for the reply. i have tried what you have posted, but unfortunately the sub_total is now not calculating at all? what am I doing wrong? (in my original code I have declared total_full and total_half, etc. i have just shortened for jsfiddle: jsfiddle.net/newbie123/ue62p/1 Jun 17, 2012 at 0:31
  • JsFiddle wraps the javascript code in the window.onload by default. So don't include the onload. It also doesn't know about your total_full, etc. variables. Therefore, my example in JsFiddle is as follows. It works for me: jsfiddle.net/CAVX/ue62p/3
    – CAVX
    Jun 17, 2012 at 0:39
  • thank you - ok. I understand the window.onload situation in JsFiddle now. it does now calculate sub total, but it is calculating it when "add_on" is changed, I would like it to calculate when "total_full" is updated, as well as when total_half is updated? Jun 17, 2012 at 0:43
  • Just add more event handlers. Updated the code above, and updated JsFiddle at jsfiddle.net/CAVX/ue62p/4
    – CAVX
    Jun 17, 2012 at 0:46
  • 1
    Yep, that's actually intentional. onChange only fires when a user updates the value. If you want that functionality, you're going to have to add calculateSubTotal to the events where total_full and total_half are updated.
    – CAVX
    Jun 17, 2012 at 1:22
0

If your function works with add_on fields, you should bind that function on each of the fields you want calculated. Just like you did for the "add_on".

So each time you change one of the fields, your function will update the subtotal.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.