Javascript Add Variable and change event

Question

I have the following code

$(document).ready(function () {
    $('#big_1').change(function () {
        var bigAmt = document.getElementById("big_1").value
            + document.getElementById("big_2").value
            + document.getElementById("big_3").value
            + document.getElementById("big_4").value
            + document.getElementById("big_5").value
            + document.getElementById("big_6").value
            + document.getElementById("big_7").value 
            + document.getElementById("big_8").value
            + document.getElementById("big_9").value
            + document.getElementById("big_10").value;

        var elem = document.getElementById("totalBig");
        elem.value = bigAmt;
    });
});

I actually wanted to add the value of big_1 to big_10 on input text value change of "big_1 to big_10" either 1 of the textfield change its value, this should be invoke.

as of now i only run on big_1 change event.

I get an javascript error by adding this way, I think the way I add them up is quite messy.

What should I do to change my code so I can sum up

big_1 to big_10 textfield value, and on change of big_1 to big_10(any of them), it will invoke this and change span id="totalBig" to the value of their sum (big_1 add until big_10)

Below is my edited extra code:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_1" id="big_1" size="6">

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_2" id="big_2" size="6">


all the way until big_10

I wanna on change value of any of this big_Identifier(1-10), it will sum it up and change my

<div class="well">
Total Big: <span id="totalbig">0</span> &nbsp;&nbsp;&nbsp;&nbsp;</span> 
</div>

I tried the

<script type="text/javascript">
$(document).ready(function() {
$('#html5Form').bootstrapValidator();
    $('.big').change(function() { 
        var bigAmt = "";

        $('.big').each(function () {
            bigAmt += $(this).val();    
        })

        var elem = document.getElementById("totalBig");
alert(bigAmt);
        elem.value = bigAmt;
    });
});
</script>

It doesn't run any alert when any of the big_ value was changed.

Answer 1

It would be much better if you added a big class to every single <input id="big_NUMBER"> . Then you could do this:

$(document).ready(function() {
    $('.big').change(function() { 
        var bigAmt = 0;

        $('.big').each(function () {
            bigAmt += Number($(this).val());    
        })

        $("#totalBig").val(bigAmt);
    });
});

That's much cleaner and easier to understand than what you had.

In order for this to work, you'll need to add a class to all your inputs:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control big" name="big_2" id="big_2" size="6"><!-- Notice the big class-->

This is the best way to group all your inputs. They are all related, so they should share a classes. You should not be calling multiple ids for functionality that's so similar.

Answer 2

If you are using jquery, use it properly, it'll make your life a lot easier.

This will work for you in your case exactly

$(document).ready(function() {
    $('[id^="big"').change(function(){
        var total = (+$('#totalBig').val());
        var currentVal = (+$(this).val());
        total += currentVal;
        $('#totalBig').val(total)
    })
});

DEMO

Answer 3

You monitor the change event on all the input type text as follows:

$('input:text').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

Or...

If you want add the monitor to any selected text boxes then you will have to add any css class to those selected text boxes and then monitor those text boxes through class as follows:

$('.yourclass').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

this change event will fire when you lose focus from the text box after changing the text....

but if you want with loosing the focus (means if you want to update the count while typing) then you should use keyup event as stated in this answer.

Answer 4

$(document).ready(function() {
    $('#big_1').change(function() {
        var divArray = ["big_1","big_2","big_3","big_4","big_5","big_6","big_7","big_8","big_9","big_9","big_10"];
        var bigAmt = 0;

        for(var i = 0, n = divArray.length;i<n;i++)
        {
            bigAmt += parseInt($("#" + divArray[i]).val(),10);
        }   
        $("#totalBig").val(bigAmt);
    });
});

Try the above, it should do what you're looking for. You'll probably want to use parseInt as well incase the input isn't of "number" type.

*edit, forgot the # for the id.

*edit, removed comment about considering using jquery functions because people are really sensitive.

Answer 5

Add class="bigs" to all inputs and then try this:

$(document).ready(function () {
    var intTotalBig;
    $('.bigs').change(function () {
        intTotalBig = 0;
        $('.bigs').each(function(){
            $thisVal = $(this).val();
            if ($.isNumeric($thisVal)){
                intTotalBig += parseInt($thisVal, 10);
            }
        });
        $("#totalBig").val(intTotalBig);
    });
});

This code check all inputs on every change and sum all of them that has a number value and ignore empty or no number values.

Check JSFiddle Demo