CODEWITHSUNDEEP
jqueryhtml
dillon
dillon

Reputation: 1

Jquery value change live

Please refer this HTML.

<input type="text" name="amount1" value="10" />
<input type="text" name="amount2" value="5" />
<input type="text" name="total" value="" disabled="disabled" />

Please refer this code. what I exact want. when I type some value (int) in amount1 textbox, that value automatically show in total box,

when I put some value to amount2, total should show (amount1+amount2) = value

I tried with this jQuery, but did not resolve my problem

$(document).ready(function() {
    $('#amount1').keyup(function() {
     $('#total').html('<input type="text" name="total" style="width: 49%;" value="' + $(this).val() + '"/>');
    });
});

can anyone help me. great!

Upvotes: 0

Views: 2394

Answers (6)

imran qasim
imran qasim

Reputation: 1050

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

    $(document).ready(function() {
    $('#amount1').keyup(function() {
   $('#total').val(parseInt($('#amount1').val())+parseInt($('#amount2').val()));       

   });
});

here is your solution as you have not used id tag because jquery works with IDz and CLasses which you haven't difined. so i have re-recreated your solution hopefully its simple and you can understand it btter.

Regards Imran Qasim Perfect Web Solutions

Working Link

Upvotes: 0

QMaster
QMaster

Reputation: 3904

Why add the input as HTML? Just use $('#total').val([value you want]);

Use this code:

$(document).on('keyup', '#amount1, #amount2', function() {
    var sumAll = parseInt($('#amount1').val()) + parseInt($('#amount2').val());
  $('#total').val(sumAll);
});

And don't forget to add id in input elements like this:

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

And that is better to use parsInt() function to sure about integer type.

You can see fiddle at: http://jsfiddle.net/QMaster/8gthskvb/

Upvotes: 0

Razorphyn
Razorphyn

Reputation: 1332

DEMO It require to add class to the input so you can add as much input as you want and avoid a list of names, if you don't need it with a simple edit you can make it works with your html

HTML:

<input type="text" class='amount' name="amount1" value="10" />
<input type="text" class='amount' name="amount2" value="5" />
<input type="text" name="total" value="" disabled='disabled' />

JS:

var total = 0;
$(document).ready(function () {
    //Calculate the first total once the page is loaded
    $('input.amount').each(function () {
        total += parseInt($(this).val());
    });
    $('input[name="total"]').val(total);

    //Each time the input value change(right click, keyboard, any) recalculate the total
    $('input.amount').on('input', function () {
        total = 0;
        $('input.amount').each(function () {
            var amountInfo = parseInt($(this).val());
            amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0
            total += amountInfo;
        });
        $('input[name="total"]').val(total);
    });
});

Upvotes: 4

dillon
dillon

Reputation: 1

<table>
    <tr>
        <td width="40px">1</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt1" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt2" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt3" /></td>
    </tr>
    <tr id="summation">
        <td  colspan ="2" align="right">
            Sum :
        </td>
        <td>
          <input type="text" id='sum1' name="input" />
        </td>
        </span>
        </td>
    </tr>
</table>

JQuery part,

$(document).ready(function() {
        //this calculates values automatically 
        calculateSum();

        $(".txt").on("keydown keyup", function() {
            calculateSum();
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0){
                $(this).css("background-color", "red");
            }
        });

        $("input#sum1").val(sum.toFixed(2));
    }

Fiddle : here

Upvotes: 0

Alok Ranjan
Alok Ranjan

Reputation: 100

$(document).ready(function() {
    $('#amount1').keyup(function() {
        $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount2').val(), 10));
    });
    $('#amount2').keyup(function() {
        $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount1').val(), 10));
    });
});

Upvotes: 0

Laurent S.
Laurent S.

Reputation: 6946

You're missing id's in your HTML and the way you input the value is a bit strange. Try this instead :

HTML

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

Javascript

$(document).ready(function() {
$('#amount1,#amount2').keyup(function() {
    var total = parseInt($('#amount1').val()) + parseInt($('#amount2').val());
 $('#total').val(total);
});

});

And the fiddle for this

jsFiddle

Note that You need to cast your (text) values to integer to get the calculation right. This is why I use parseInt(). If you need to input floating point numbers, you'll need to replace this cast with parseFloat() method. You might also want to check if the entered value is indeed a number, which can be done in different ways, one of them being the isNaN() method (isNotaNumber => returns true if the value is not a number)

Upvotes: 1

Related Questions