I am trying to subtract two numbers from an HTML Input form and populate the result into another input field using JavaScript. Unfortunately i am new to JavaScript so please be so kind to point me in the right direction. Here's my HTML code.

<div class="form-group col-lg-6">
    <label for="exampleInputText">Total Price</label>
    <input type="text" name="totalval"     class="form-control" id="totalval">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Initial Deposit</label>
    <input type="text" name="inideposit" class="form-control" id="inideposit">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Outstanding Dues</label>
    <input type="text" name="remainingval" class="form-control" id="remainingval" >
</div>

Here is my JavaScript code:

<script type="text/javascript">

    var total = parseInt(document.getElementById("totalval").value);
    var val2 = parseInt(document.getElementById("inideposit").value);
    var ansD = document.getElementById("remainingval");
    ansD.value = total - val2;

</script>

I am trying to subtract two numbers from an HTML Input form and populate the result into another input field using JavaScript. Unfortunately i am new to JavaScript so please be so kind to point me in the right direction. Here's my HTML code.

<div class="form-group col-lg-6">
    <label for="exampleInputText">Total Price</label>
    <input type="text" name="totalval"     class="form-control" id="totalval">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Initial Deposit</label>
    <input type="text" name="inideposit" class="form-control" id="inideposit">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Outstanding Dues</label>
    <input type="text" name="remainingval" class="form-control" id="remainingval" >
</div>

Here is my JavaScript code:

<script type="text/javascript">

    var total = parseInt(document.getElementById("totalval").value);
    var val2 = parseInt(document.getElementById("inideposit").value);
    var ansD = document.getElementById("remainingval");
    ansD.value = total - val2;

</script>

• javascript
• html

• What errors do you get? – halex Commented Mar 28, 2015 at 13:44
• 2 The calculation works fine in itself, but you are doing it only once when the page loads and the fields are empty. You should use something like a button to trigger the code so that you can do the calculation after filling in the fields. – Guffa Commented Mar 28, 2015 at 13:46
• My input field is being populated by 'NaN' – Ahmad Commented Mar 28, 2015 at 13:46
• I don't want a button... Please have a look at this (jsfiddle/Z5dV8) – Ahmad Commented Mar 28, 2015 at 13:48

1 Answer 1

Your code works fine, so you'll just need to wrap your code in a function, and then call it every time that the input fields are modified (onchange event).

<div class="form-group col-lg-6">
    <label for="exampleInputText">Total Price</label>
    <input type="text" name="totalval" class="form-control" id="totalval" onchange="updateDue()">
</div>
<div class="form-group col-lg-6">
    <label for="exampleInputText">Initial Deposit</label>
    <input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue()">
</div>
<div class="form-group col-lg-6">
    <label for="exampleInputText">Outstanding Dues</label>
    <input type="text" name="remainingval" class="form-control" id="remainingval">
</div>

Finally, to make sure they are numbers (I was getting some weird result when one of them was empty), add some code to make sure the values are numeric:

function updateDue() {

    var total = parseInt(document.getElementById("totalval").value);
    var val2 = parseInt(document.getElementById("inideposit").value);

    // to make sure that they are numbers
    if (!total) { total = 0; }
    if (!val2) { val2 = 0; }

    var ansD = document.getElementById("remainingval");
    ansD.value = total - val2;
}

You can see it on this JSFiddle: http://jsfiddle/sbu00cu2/