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

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.