如何检测 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?

Answer 1

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>

Answer 2

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/

Answer 3

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>

Answer 4

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

Answer 5

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.