How to Detect Change in a Text Input Box in jQuery

Question

I have two text input text box and I want to do the total of whatever no entered by the user. Below is my code:

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        total += parseInt($(this).val());
        $("#result").text(	total);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
    <div id="result"></div>

When I input 10 first then it takes 11, then if I enter 100 then it takes 111, I am no getting why this happening. Where I am making an error, guide me?

It's because you're adding the value for every character that's typed. Eg. if you type 10, it adds 0 + 1 for the first character, then 1 + 10. — Rory McCrossan
– Rory McCrossan, Commented Oct 24, 2019 at 9:53
then what will be correct solution for this ? @RoryMcCrossan — Mohammed Sabir
– Mohammed Sabir, Commented Oct 24, 2019 at 9:54

Yahiya · Accepted Answer · 2019-10-24 10:33:51Z

3

On your code when you enter the first digit it's been calculated to the total because of your code total += parseInt($(this).val()). for example, if your press first digit as 1 then at that time total is updating as total = total + 1 which equals 1, on the second keypress, for example, take 0, then your input value becomes 10. it is calculating to the current total value as total = total + 10. that's why you are getting 11 as answer

Try like this.

$(document).ready(function(){
$(".test").on("input", function(){
    let total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    $("#result").text(total);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>

edited Oct 24, 2019 at 10:33

answered Oct 24, 2019 at 9:58

Yahiya

7995 silver badges15 bronze badges

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

5 Comments

Martijn Over a year ago

Please explain why you think this is the solution instead of just some code, so that OP can understand and solve it themself next time :)

Shubham Baranwal Over a year ago

You can't just hardcoded the input select method suppose if there are more than two input fields then your code condition will be going to modified again and again. Try my answer as well or you can update your answer. @Yahiya

Yahiya Over a year ago

you are right @ShubhamBaranwal. But on his question, he said he has two text fields, no mention of the dynamic amount of fields that why I added the answer like this. Also, a thumbs up for your answer too... ;)

Shubham Baranwal Over a year ago

True, but your answer does not only help this user, but your answer can also help others too if it's optimized and scalable for others. @Yahiya

Yahiya Over a year ago

@ShubhamBaranwal acknowledged

Devestel · Accepted Answer · 2019-10-24 10:17:09Z

The reason it didn't showed you the result you want to, is because the calculation is wrong. You now add the number to the total, every time one input field changes. So if you type 123, it takes 0 + 1 , then 1 + 12, then 13 + 123 so you'll have 136 as result.

I wrote a possible solution for your question. The code is in the fiddle below.

You could add a function where you calculate the total of all input fields (may be more than 2, it's generic).

function calculateTotal(){
  var total = 0;
    $(".test").each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(total);
}

And on the change of your input fields, you just execute that function.

$(document).ready(function(){
    $(".test").on("input", function(){
        calculateTotal();
    });
});

Your example is in this fiddle: https://jsfiddle.net/xL6hgder/2/

Shubham Baranwal · Accepted Answer · 2019-10-24 10:05:46Z

You just update total with that input value that you're trying to change.

For getting the total for both input values you have to take both values and add it with the total.

Try below code-

$(document).ready(function() {
  $(".test").on("change", function() {
    var total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    // Print entered value in a div box

    $("#result").text(total);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<div id="result"></div>

Nasira Mohamed Noufal · Accepted Answer · 2019-10-24 10:26:35Z

0

 $(document).ready(function () {
        $(".test").on('input', function () {
            var total = parseInt($("#result").text());
            total = parseInt($("#myInput").val()) + parseInt($("#myInput1").val());
            $("#result").text(total);
        });
    });

 <p><input type="text" class="test" placeholder="Type something..." id="myInput" /></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput1" /></p>
    <div id="result"></div>

answered Oct 24, 2019 at 10:26

Nasira Mohamed Noufal

564 bronze badges

Comments

foobar2k19 · Accepted Answer · 2019-10-24 09:59:27Z

-1

Use the change event instead of the input event. It will only fire when the value is "commited", instead of every keystroke. See mdn for details.

answered Oct 24, 2019 at 9:59

foobar2k19

844 bronze badges

1 Comment

Shubham Baranwal Over a year ago

You should write this into comment section, not as an answer.

Collectives™ on Stack Overflow

How to Detect Change in a Text Input Box in jQuery

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related