1

I know this question has been asked multiple times, but there is no clear answer about it. I am trying to do some process (an ajax call) when the user is writing on an input. So I tried to use the onchange event, but it does not seem to work. I can't understand why. Here' my code:

HTML:

<input type="text" required="" class="form-control" name="email" placeholder="Adresse email" id="email">

JS

$("#email").change(function() {
  alert("here");
  /**** Process ****/
});

And here is the fiddle : JSFiddle

I saw in other posts that one should not use the change event, but I can't find a clear answer about how to it correctly.

nem035
  • 34,790
  • 6
  • 87
  • 99
Spider
  • 875
  • 2
  • 9
  • 27
  • 3
    Dude you are missing to include jquery. – Hemant Apr 07 '17 at 14:45
  • Your fiddle is missing jQuery. Once you fix that, the "change" event will only fire once the focus leaves the textbox. Is that what you want? Or do you want to track every time the user types or deletes a character? – ADyson Apr 07 '17 at 14:46

4 Answers4

1

You said you want it to fire when the user is writing on an input, so the appropriate event to use here is onkeyup, this is how should be your code:

$("#email").on('keyup', function() {
  console.log("typing ...");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required="" class="form-control" name="email" placeholder="Adresse email" id="email">

Note:

Avoid using alert() as it will try to alert the message whenever you enter character.

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
0

change will fire when you lose focus. Perhaps you meant to use the input event?

$("#email").on('input', e => console.log(e.target.value));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required="" class="form-control" name="email" placeholder="Adresse email" id="email">
nem035
  • 34,790
  • 6
  • 87
  • 99
0

I have updated the fiddle. Take a look link. Included jQuery link and use the keyup function, in case you want the character entered.

$("#email").keyup(function() {
alert("There");
});
Nikhil Mathew
  • 56
  • 5
0

Replace your javascript with this: 

$(document).on('change','#email',function() {
    alert("here");
});
Rarepuppers
  • 723
  • 1
  • 10
  • 21
Tiago Roque
  • 43
  • 8