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.

@Mritunjay , I am very new to javascript and jquery, I am more knowledgeable with php . I am still learning sorry :) — user3412075
– user3412075, Commented Aug 27, 2014 at 18:59
In formatting your code, I noticed a stray ; before the big_8 line. Is that there in your real code? — Jason P
– Jason P, Commented Aug 27, 2014 at 18:59
@JasonP , sorry I type it wrongly when I enter here. I will remove away the extra ; — user3412075
– user3412075, Commented Aug 27, 2014 at 19:00
The accompanying HTML code would help us ensure that you don't also have errors within it. — crush
– crush, Commented Aug 27, 2014 at 19:04

Jorge Silva · Accepted Answer · 2014-08-27 19:13:32Z

4

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.

edited Aug 27, 2014 at 19:13

answered Aug 27, 2014 at 18:59

Jorge Silva

4,6342 gold badges26 silver badges44 bronze badges

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

7 Comments

epascarello Over a year ago

I think OP is wanting to add numbers.

crush Over a year ago

You might convert the value of val() to an int or floating-point type so that you don't accidentally concatenate strings.

Ryan Over a year ago

He wants to add integers, not concatenate strings.

user3412075 Over a year ago

I tried your solution and strangely it doesn't invoke when I change, because I tried to include a alert before var elem, it doesn't seems to work, and yes I wanted to add integer

Jorge Silva Over a year ago

have you edited your HTML? You have to add the css class to the input elements?

|

Mritunjay · Accepted Answer · 2014-08-27 19:13:21Z

1

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

answered Aug 27, 2014 at 19:13

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Moshtaf · Accepted Answer · 2014-08-27 19:08:24Z

0

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

answered Aug 27, 2014 at 19:08

Moshtaf

4,9132 gold badges27 silver badges34 bronze badges

2 Comments

user3412075 Over a year ago

Can I don't set class="bigs" because I got other class running on my input text, i can set id="big_"

Moshtaf Over a year ago

@user3412075: there are no problem, add this class too, like this: <input type="text" id="big_1" class="other1 other2 other3 bigs" /> just add this class to other classes too.

Community · Accepted Answer · 2017-05-23 12:27:09Z

0

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.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Aug 27, 2014 at 19:03

Hassan Baig

3461 silver badge10 bronze badges

2 Comments

user3412075 Over a year ago

All my input text that I wanna monitor is of the identifier pattern big_1 to big_10 , I wanna add their integer value together and change span id="totalBig" content into the total value of sum of all the big_1 to big_10

Hassan Baig Over a year ago

No matter what is your identifier pattern you can use generic jquery selector like "$('input:text')" or "$('.yourclass')" as stated in my above answer. In this there will be a single event handler which wil be attached to all or selected text boxes

Christopher · Accepted Answer · 2014-08-27 19:13:22Z

0

$(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.

edited Aug 27, 2014 at 19:13

answered Aug 27, 2014 at 19:06

Christopher

515 bronze badges

13 Comments

crush Over a year ago

Why should he use the jQuery functions simply because he is using parts of jQuery for other reasons? I'd stress that you not use jQuery for the sake of jQuery.

David Sherret Over a year ago

@crush why? It's much cleaner and concise to write $("#totalBig").val(bigAmt);

crush Over a year ago

@DavidSherret Really? Is it much cleaner and concise? That seems fairly subjective. Have you ever looked at the jQuery code for val()? It's substantially slower than accessing the JavaScript property directly.

Ryan Over a year ago

I agree with @crush. Avoid using jQuery when possible, especially for simple things like the value property of the DOM element.

crush Over a year ago

@DavidSherret Who's being childish here? You are trying to establish your point with a completely invalid comparison. You assigned the result of getElementById() to a variable first before accessing its value property all in an attempt to make it seem even less concise. The selecting of the element is inconsequential to this discussion. A responsible coder would cache the element in a variable for later reuse throughout the application, and thus, the means by which it is selected are irrelevant. Furthermore, I reject your opinion that jQuery's selector syntax is more succinct than the DOM.

|

Collectives™ on Stack Overflow

Javascript Add Variable and change event

5 Answers 5

7 Comments

Comments

2 Comments

2 Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

2 Comments

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related