Unable to get input box to populate with onKeyup or onChange

Question

So I have a form that when you input a number in the Qty and Price boxes it totals them up in the Ext box as it should. As you continue down the rows to add more Qty and price it continues to calculate the total and populates the Material Total as it should but it's not adding the tax and populating the Total box as it should be. If you manually input an amount in the Material total box then the tax and total will automatically populate and the total is correct. I've tried using onChange, onKeyup, and even onInput but nothing seems to work.

Here is my sales tax script:

function tax(){
var material = document.getElementById( 'material' ).value;
var salestax = Math.round(((material / 100) * 8.1)*100)/100;
var total = (material*1) + (salestax * 1);

document.getElementById( 'material' ).value = material;
document.getElementById( 'salestax' ).value = salestax;
document.getElementById( 'total' ).value = total;
}

An here is the html related to the script:

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Material Total</td> 
<td><input type="text" name="material_total"style="width: 55px"id="material"onChange="tax()"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Sales Tax</td> 
<td><input type="text" name="sales_tax" style="width: 55px" id="salestax" onChange="tax()"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Shipping</td> 
<td><input type="text" name="ship_cost" style="width: 55px" id="shipping"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Total</td>
<td><input type="text" name="total_parts_cost" style="width: 55px"  id="total"></td>
</table>

Update to question: so after playing with it I found out the onpropertychange will make the form work but only in IE (I'm using IE 10) but not in firefox. I'm including the code that I use to total the Qty and Price boxes that auto populates the Ext box because that works and I use onkeyup. I don't understand why it wont work for the tax section.

enter code here    function multiply1() {
var extend1 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "1_value" + i;
    extend1 = extend1 * document.getElementById(id).value;
}
document.getElementById("extend1").value = extend1;
summate();
}

function multiply2() {
var extend2 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "2_value" + i;
    extend2 = extend2 * document.getElementById(id).value;
}
document.getElementById("extend2").value = extend2;
summate();
}

function multiply3() {
var extend3 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "3_value" + i;
    extend3 = extend3 * document.getElementById(id).value ;
}
document.getElementById("extend3").value = extend3;
summate();
}

function multiply4() {
var extend4 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "4_value" + i;
    extend4 = extend4 * document.getElementById(id).value;
}
document.getElementById("extend4").value = extend4;
summate();
}

function multiply5() {
var extend5 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "5_value" + i;
    extend5 = extend5 * document.getElementById(id).value;
}
document.getElementById("extend5").value = extend5;
summate();
}

function summate() {
var material = 0;
for (var i = 1; i <= 5; i++) {
    var id = "extend" + i;
    material = material + document.getElementById(id).value * 1;
}
document.getElementById("material").value = material;
}

Answer 1

I think I understand what you're asking: The onchange event is not firing for the material box because it is being changed programatically, and therefore will not fire.

You can fire this function manually. It appears that you are modifying the material box in your summate() function. To make the material box register a change, add the following line to the very end of the summate() function:

document.getElementById("material").onchange();

Hopefully that was what you wanted. I think you might have to add this sort of thing on some of the quantity or other fields as well if you want it to update whenever a box is modified.

EDIT: This will only work if you have the onchange attribute set for your material element (I noticed you changed it to oninput).