CODEWITHSUNDEEP
javascriptjqueryinputhtml-input
Mohammed Sabir
Mohammed Sabir

Reputation: 354

How to Detect Change in a Text Input Box in jQuery

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?

Upvotes: 0

Views: 139

Answers (5)

Yahiya
Yahiya

Reputation: 791

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>

Upvotes: 3

Nasira Mohamed Noufal
Nasira Mohamed Noufal

Reputation: 56

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

Upvotes: 0

Devestel
Devestel

Reputation: 231

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/

Upvotes: 1

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

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>

Upvotes: 1

foobar2k19
foobar2k19

Reputation: 84

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.

Upvotes: -1

Related Questions