CODEWITHSUNDEEP
jquery
user1227914
user1227914

Reputation: 3514

calculating total of 2 input fields in jQuery

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?

Upvotes: 2

Views: 2928

Answers (3)

ahmad rabbani
ahmad rabbani

Reputation: 319

It should be like this

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

Upvotes: 2

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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>

Upvotes: 4

Hoja
Hoja

Reputation: 1207

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/

Upvotes: 0

Related Questions