jQuery input value undefined or white text

Question

This question has probably been asked and answerd a thousand times before, but I don't know if it's because of SEO, I've not found a suitable solution. I either get undefined or blank text in Chrome.

$('input[type="text"]').on('input', (a, b) => {
    console.log(this.value);
});

This keeps returning undefined in the console I've also tried:

$('input[type="text"]').on('input', (a, b) => {
       console.log(b);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log($(this).val());
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(a.value);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(b.value);
    });

Any idea's would be very appreciated.

Zakaria Acharki · Accepted Answer · 2018-11-29T15:08:20.440

6

The this keyword will not work us you expect since you're using es6 arrow function format what will change the context, use e.target instead of it.

Take a look at What does “this” refer to in arrow functions in ES6?

$('input[type="text"]').on('input', (e) => {
  console.log(e.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">

edited Nov 29 '18 at 15:08

answered Nov 29 '18 at 15:02

Zakaria Acharki

66,747
15
75
101

Wow that solved it! I didn't know the fat arrow changed the way returning values work! – Ezrab_ Nov 29 '18 at 15:06
Yes take a look to [Arrow functions vs Fat arrow functions](https://stackoverflow.com/questions/43588722/arrow-functions-vs-fat-arrow-functions/43593587) – Zakaria Acharki Nov 29 '18 at 15:07
'e.target.value.test' why is this than not possible? – Ezrab_ Nov 29 '18 at 15:11
The values attribute has no `test` property, what you want to get exactly? – Zakaria Acharki Nov 29 '18 at 15:13
I want to test a RegExp on the input value – Ezrab_ Nov 29 '18 at 15:14
1

It should be `new RegExp("your_regex").test(e.target.value);` – Zakaria Acharki Nov 29 '18 at 15:16

brk · Answer 2 · 2018-11-29T15:08:04.480

3

This is because you are using arrow function the scope of which is different from normal function.

Normally you can replace arrow function with conventional function expression & use $(this) or use the target object from event handler to get the value of the input

$('input[type="text"]').on('input', function(a, b) {
  console.log($(this).val());
});

$('input[type="text"]').on('input', (a, b) => {
  console.log(a.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text'>

edited Nov 29 '18 at 15:08

answered Nov 29 '18 at 15:07

brk

48,835
10
56
78

1

This is identical to the other answer :| – Mosh Feu Nov 29 '18 at 15:07
@MoshFeu take a better look – brk Nov 29 '18 at 15:08
You added now the regular `function` method.. Nice. – Mosh Feu Nov 29 '18 at 15:09
That was added even before your first comment. Please validate it from revision history – brk Nov 29 '18 at 15:11
When you right, you right :) – Mosh Feu Nov 29 '18 at 15:13

jQuery input value undefined or white text

2 Answers2