calculate on document ready javascript

Question

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;

Take a look at [KnockoutJS](http://knockoutjs.com/). They have a nice [Tutorials](http://learn.knockoutjs.com/) and it should help you with your problem. — Aleksey Cherenkov, Jun 17 '12 at 00:31

CAVX · Accepted Answer · 2012-06-17T00:45:43.840

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;

}

edited Jun 17 '12 at 00:45

answered Jun 17 '12 at 00:24

CAVX

194
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: http://jsfiddle.net/newbie123/ue62p/1/ – user1426583 Jun 17 '12 at 00: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: http://jsfiddle.net/CAVX/ue62p/3/ – CAVX Jun 17 '12 at 00: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? – user1426583 Jun 17 '12 at 00:43
Just add more event handlers. Updated the code above, and updated JsFiddle at http://jsfiddle.net/CAVX/ue62p/4/ – CAVX Jun 17 '12 at 00:46
it works in Jfiddle-but when i use it in original form, the total_full and total_half fields are calculated automatically from other fields, and therefore do not have a keyup or keydown event? – user1426583 Jun 17 '12 at 01:10
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 '12 at 01:22

score 0 · Answer 2 · answered Jun 17 '12 at 00: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.

answered Jun 17 '12 at 00:22

Zlatko

18,936
14
70
123

calculate on document ready javascript

2 Answers2