Javascript error while calculating

Question

I have a php simple program to calculate a textbox with another textbox, 1 years ago, there's no problem after now, I have problem with my JavaScript. It can't count my textbox.

My form code is here (without html tag, to minimize code in here):

<table>
<tr>
    <td>Tol</td>
    <td>:</td>
    <td><input type="text" maxlength="11" name="tol" onkeydown="calculate()" value="0" /></td>
</tr>
<tr>
    <td>Parkir</td>
    <td>:</td>
    <td><input type="text" maxlength="11" name="parkir" onkeydown="calculate()" value="0" /></td>
</tr>
<tr>
    <td>Joki</td>
    <td>:</td>
    <td><input type="number" maxlength="11" name="joki" onkeydown="calculate();" value="0" /></td>
</tr>
<tr>
    <td>Other</td>
    <td>:</td>
    <td><input type="number" name="other" maxlength="11" onkeydown="calculate();" value="0" /> <input type="text" name="othername" maxlength="50" /> </td>
</tr>
<tr>
    <td>Total</td>
    <td>:</td>
    <td><input type="text" id="subtotal" onfocus="this.value = numberFormat(this.value);" name="subtotal" maxlength="100" value="0" />
        <input type="text" id="totalbox" name="totalbox" maxlength="100" />
    </td>
</tr>
    </table>

and my JS script:

function calculate(){
var num1=document.myform.tol.value;
var num2=document.myform.parkir.value;
var num3=document.myform.joki.value;
var num4=document.myform.other.value;

var sum=parseFloat(num1)+parseFloat(num2)+parseFloat(num3)+parseFloat(num4);
document.getElementById('totalbox').value=sum.toString();
document.getElementById('subtotal').value=sum.toString();
}

can somebody correct my code or is there any update from JS that made my JS code doesn't work now?

tilleryj · Accepted Answer · 2013-04-17 02:24:29Z

2

Try using the onkeyup event instead of onkeydown. The onkeydown event fires before the value of your textbox reflects the input being typed in.

answered Apr 17, 2013 at 2:24

tilleryj

14.4k3 gold badges26 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cross Vander Over a year ago

I have tried that. I even try onfocus, onblur, onchange, but it just same.. :(

Cross Vander Over a year ago

I see... that's the problem... You write window.calculate = function() and I just write function calculate() thank you so much, now it's work fine... :D

Revent Over a year ago

Why/how does this fix the issue?

Revent · Accepted Answer · 2013-04-17 02:09:09Z

1

Try referencing the input boxes by id rather than by form.name:

function calculate(){
   var num1=document.getElementById('tol').value;
   var num2=document.getElementById('parkir').value;
   var num3=document.getElementById('joki').value;
   var num4=document.getElementById('other').value;

   var sum=parseFloat(num1)+parseFloat(num2)+parseFloat(num3)+parseFloat(num4);
   document.getElementById('totalbox').value=sum.toString();
   document.getElementById('subtotal').value=sum.toString();
}

add the id attribute to your inputs:

<input type="text" maxlength="11" name="tol" id="tol" onkeydown="calculate()" value="0" />
...

You might also want to make your code a little more robust by checking to see if the element exists before trying to get the value:

function calculate(){
  var fld1 = document.getElementById('tol');
  var num1 = 0;
  if (fld1 && fld1 != 'undefined') num1 = fld1.value;
  ...

answered Apr 17, 2013 at 2:09

Revent

2,0922 gold badges20 silver badges33 bronze badges

1 Comment

Cross Vander Over a year ago

it just same... the code not counting my textbox... is there an update from JS that made my code failed to work?

Collectives™ on Stack Overflow

Javascript error while calculating

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related