Javascript calculations between text boxes

Question

My Javascript function aa() is called with the value of the paying_now input field. I want to find the sum of the value of paying_now and of paid , and the difference of balance and paying_now .

The values of netpay , balance , and paid will be fetched from a database. Here, I have set net_pay to 1000, as an example.

This code works only with balance and doesn't change the paid textbox, when the paying_now value should be added to it. NaN is also occuring. What gives?

Javascript

   function aa(paying_now)
    {
        var net_pay = document.getElementById('net_pay').value;

        var paid = document.getElementById('paid_hidden').value;
        var balance = document.getElementById('balance_hidden').value;

        if(parseInt(paying_now) > parseInt(net_pay))
        {
            document.getElementById('paying_now').value=0;
            document.getElementById('paid').value=paid;
            document.getElementById('balance').value=balance;
            alert("Amount Paying now cannot be higher than Netpay");
            return;
        }
        else if(parseInt(paying_now) > parseInt(balance))
        {
            document.getElementById('paying_now').value=0;
            document.getElementById('paid').value=paid;
            document.getElementById('balance').value=balance;
            alert("Amount Paying now cannot be higher than balance amount");
            return;

        }

    document.getElementById('paid').value = parseInt(paid)+parseInt(paying_now);
    document.getElementById('balance').value = parseInt(balance)-parseInt(paying_now);

    }

HTML

<table> 
    <tr>
        <td>
            <strong>Netpay:</strong>
            <input type='text' id='net_pay' value = '1000' readonly />
        </td>
        <td>
            Paid: <input type='text' value='100' id='paid' name='paid' readonly />
            <input type='hidden' value='100' id='paid_hidden' ></td>
        </td>
        <td>
            <strong>Balance:</strong>
            <input type='text' value='900' id='balance' readonly />
            <input type='hidden' value='900' id='balance_hidden' />
        </td>

        <td>
            <strong>Paying now:</strong><input type='text' id='paying_now' onkeyUp='aa(this.value);' />
        </td>
    </tr>
</table>

For what it's worth, here is a JSFiddle with this code: http://jsfiddle.net/JeSZX/

Answer 1

Your JScript code does basically what you described you want it to do (but maybe I've understood it wrong).

NaN is appearing whenever you have some values in your paying now-field which aren't numbers (pe nothing or letters). In order to counter this you need to check the content of the variable paying_now before doing some arithmetics with it, pe with the isNaN() function:

if (isNaN(paying_now) == false) {
    alert ("Not a number!");
    return;
}

Your demo html code is slightly obfuscating the issues, echos and table construction isn't part of your problem.

Try simplyfing it slightly, something like this:

Netpay:
<input type='text' id='net_pay' value = '1000' readonly />
Paid:
<input type='text' value='100' id='paid' name='paid' readonly />
<input type='hidden' value='100' id='paid_hidden' />
Balance:
<input type='text' value='900' id='balance' readonly />
<input type='hidden' value='900' id='balance_hidden' />
Paying now:
<input type='text' id='paying_now' onkeyUp='aa(this.value);' />

Answer 2

I have modified the code. Please implement this, its working fine.

function aa(paying_now)
{
    var net_pay = document.getElementById('net_pay').value;
    var paid = document.getElementById('paid_hidden').value;
    var balance = document.getElementById('balance_hidden').value;

    if(paying_now === ""){
        document.getElementById('paid').value = paid;
        document.getElementById('balance').value = balance;
    }    
    else if(parseInt(paying_now) > parseInt(net_pay))
    {
        alert("Amount Paying now cannot be higher than Netpay");
        document.getElementById('paying_now').value="";
        document.getElementById('paid').value=paid;
        document.getElementById('balance').value=balance;
        document.getElementById('paying_now').focus();
    }
    else if(parseInt(paying_now) > parseInt(balance))
    {
        alert("Amount Paying now cannot be higher than balance amount");
        document.getElementById('paying_now').value="";
        document.getElementById('paying_now').focus();
    }
    else{
    document.getElementById('paid').value = parseInt(paid)+parseInt(paying_now);
    document.getElementById('balance').value = parseInt(balance)-parseInt(paying_now);
    }
}

There were some small mistakes in html code, please change that too. For example, in certain places closing tag were missing. Put the hidden field inside <td> and </td> only.

Answer 3

<html>

<head>
<script>
function aa(paying_now)
    {

    if(isNaN(parseInt(paying_now)))
{paying_now=0;
}
    var net_pay = document.getElementById('net_pay').value;

        var paid = document.getElementById('paid_hidden').value;
        var balance = document.getElementById('balance_hidden').value;

        if(parseInt(paying_now) > parseInt(net_pay))
        {
            document.getElementById('paying_now').value=0;
            document.getElementById('paid').value=paid;
            document.getElementById('balance').value=balance;
            alert("Amount Paying now cannot be higher than Netpay");
            return;
        }
        else if(parseInt(paying_now) > parseInt(balance))
        {
            document.getElementById('paying_now').value=0;
            document.getElementById('paid').value=paid;
            document.getElementById('balance').value=balance;
            alert("Amount Paying now cannot be higher than balance amount");
            return;

        }

    document.getElementById('paid').value = parseInt(paid)+parseInt(paying_now);
    document.getElementById('balance').value = parseInt(balance)-parseInt(paying_now);

    }
</script>

</head>
<body>
<form name="form1">

<table>
<tr><td>
<strong>
Netpay:<strong>
<input type='text' id='net_pay' value = '1000' readonly />
<td>Paid:<input type='text' value='100' id='paid' name='paid' readonly />
</td>
<input type='hidden' value='100' id='paid_hidden' >
<td><strong>Balance:</strong><input type='text' value='900' id='balance' readonly /></td>
<input type='hidden' value='900' id='balance_hidden' />
<td><strong>Paying now:</strong><input type='text' id='paying_now' onkeyUp='aa(this.value);' /></td></tr>

  </table>

</form>    
</body>
</html>

check out this its working fine for me , I have added the following line extra to your code for handling NaN like "" or alphabets

 if(isNaN(parseInt(paying_now)))
{paying_now=0;
}

Answer 4

if u want to get only current change value at paid you have to just remove the addition of 'paid ' and 'paying_now' so your code will look like.

<script>
function aa(paying_now)
{


    var net_pay = document.getElementById('net_pay').value;
    var pay_now=document.getElementById('paying_now').value;
    var paid = document.getElementById('paid_hidden').value;
    var balance = document.getElementById('balance_hidden').value;

    if(pay_now==" ")
    {
        alert("value requrie");
        document.getElementById('paying_now').focus();
        document.getElementById('paid_hidden').value=paid;
        document.getElementById('balance_hidden').value=balance;
        return;
    }

    if(parseInt(paying_now) > parseInt(net_pay))
    {
        document.getElementById('paying_now').value=0;
        document.getElementById('paid').value=paid;
        document.getElementById('balance').value=balance;
        alert("Amount Paying now cannot be higher than Netpay");
        return;
    }
    else if(parseInt(paying_now) > parseInt(balance))
    {
        document.getElementById('paying_now').value=0;
        document.getElementById('paid').value=paid;
        document.getElementById('balance').value=balance;
        alert("Amount Paying now cannot be higher than balance amount");
        return;

    }

document.getElementById('paid').value = parseInt(paying_now);
document.getElementById('balance').value = parseInt(balance)-parseInt(paying_now);

}
</script>