CODEWITHSUNDEEP
javascriptjqueryhtml
Dake
Dake

Reputation: 81

How i can detect when input values are change using Jquery

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="">

Upvotes: 0

Views: 54

Answers (2)

Andreas
Andreas

Reputation: 21881

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="">

Upvotes: 3

Carl Edwards
Carl Edwards

Reputation: 14434

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="">

Upvotes: 2

Related Questions