calculating total of 2 input fields in jQuery

Question

I have this HTML form:

<div>
    Amount 1: <input id="amount1" type="text" />
    <br>
    Amount 2: <input id="amount2" type="text" value="0.00">
    <br>
    <span id="result"></span>
</div>

And this Jquery code:

$("#amount1").keyup(calc);
$("#amount2").keyup(calc);
function calc() {
  $('#result').val(
    parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
  );
}

What I'm trying to do is simply calculating and displaying amount1+amount2 when someone inputs numbers into the forms. Note that amount1 is 0.00 by default.

When I run it, it doesn't calculate anything. What am I doing wrong here?

span elements dont contain .val method - instead set the .text property — tymeJV
– tymeJV, Commented Jan 2, 2015 at 17:05
Why setting value="0.00" when obviously you are looking for integer (amount value)??? — A. Wolff
– A. Wolff, Commented Jan 2, 2015 at 17:11

Anik Islam Abhi · Accepted Answer · 2015-01-02 18:34:25Z

4

info inside span,div will be as html not as value

in javascript , data for div,span will be innerHTML

in jquery, data for div,span will be html,append,text etc.

use parseFloat instead of parseInt as you are dealing with float numbers

$("#amount1").keyup(calc);
$("#amount2").keyup(calc);

function calc() {

    $('#result').html(
        parseFloat($('#amount1').val(), 10) + parseFloat($("#amount2").val(), 10)
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Amount 1: <input id="amount1" type="text" />
    <br>
    Amount 2: <input id="amount2" type="text" value="0.00">
    <br>
    <span id="result"></span>
</div>

edited Jan 2, 2015 at 18:34

answered Jan 2, 2015 at 17:07

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

Anik Islam Abhi · Accepted Answer · 2015-01-03 00:37:23Z

2

It should be like this

$("#amount1").keyup(calc);
    $("#amount2").keyup(calc);
    function calc() {
      $('#result').html(
        parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
      );
    }

edited Jan 3, 2015 at 0:37

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

answered Jan 2, 2015 at 17:05

ahmad rabbani

3192 silver badges9 bronze badges

Comments

Hoja · Accepted Answer · 2015-01-02 17:14:16Z

I think you could use this custom snippet. Please check the fiddle.

HTML

<table>
<thead>
    <th>Item</th>
    <th>Cost</th>
</thead>
<tbody id="tbody">
    <tr>
        <td>Item 1</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 4</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 5</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>

</tbody>
<tfoot>
    <tr>
        <td>Total</td>
        <td>
            <label id="total">0</label>
        </td>
    </tr>
</tfoot>

jQuery

 $('body').on('keyup','.elm',function(e){
    //Check Key Press is Enter
    if (e.keyCode != 13) {
        var sum = 0;
        $('.elm').each(function() {
            if($(this).val() != '' && !isNaN($(this).val())){
                sum += parseInt($(this).val());
            }
        });

        $('#total').text(sum);
    }
    else{
        var itemNum = $('#tbody tr').length + 1;
        var newRow = '<tr>'+
            '<td>Item'+itemNum+'</td>'+
            '<td>'+
                '<input type="text" class="elm">'+
            '</td>'+
        '</tr>';
        $('#tbody').append(newRow);
    }
});

http://jsfiddle.net/hoja/y7ny6r5n/5/

Collectives™ on Stack Overflow

calculating total of 2 input fields in jQuery

3 Answers 3

Comments

Comments

HTML

jQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

HTML

jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related