How i can detect when input values are change using Jquery

Question

I don't understand why it doesn't work, It should print debug by console.log and i tried to use on change method also didn't work.

So, i can't find the way to fix, How i can solve this problem. Thank you for your help.

$(document).ready(function() {
  $("[id^=item-]").on('input', function() {
    console.log(this.val())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

or

$(document).ready(function() {
   $("#item-1").on('input', function() {
    console.log(this.val())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

There should be a TypeError in the console because this is the <input> element and that has no .val() method. Either wrap this in a jQuery object or use .value instead — Andreas
– Andreas, Commented Feb 8, 2020 at 15:05
Ah crap. Subconsciously did this while redoing it as a snippet. I'll revise. — Carl Edwards
– Carl Edwards, Commented Feb 8, 2020 at 15:07
$(this) is jQuery Object & this is JS object which don't have function .val(). Use this.value or $(this).val() — Ritesh Khandekar
– Ritesh Khandekar, Commented Feb 8, 2020 at 15:10

Andreas · Accepted Answer · 2020-02-08 15:10:06Z

3

this in your event handler is the <input> element that triggered the event.
.val() is a jQuery method.

Either wrap this in a jQuery object

$(this).val()

Or use .value

this.value

$(document).ready(function() {
   $("#item-1").on('input', function() {
    console.log(this.value);
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

answered Feb 8, 2020 at 15:10

community wiki

Andreas

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

Comments

Carl Edwards · Accepted Answer · 2020-02-08 15:09:34Z

You either need to wrap this in a jQuery object:

console.log($(this).val());

$(document).ready(function() {
  $("[id^=item-]").on('input', function() {
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

or use this natively and grab the value:

console.log(this.value);

$(document).ready(function() {
  $("[id^=item-]").on('input', function() {
    console.log(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

Collectives™ on Stack Overflow

How i can detect when input values are change using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related