How can I run jQuery when text input value changes?

Question

All I want is to display a success message when a user changes the input value. If it starts off as foo and a user types s making foos, I want to display a success message.

What am I missing?

Simple JSFiddle: http://jsfiddle.net/DdyNN/

HTML:

<input type="text" name="foo" id="foo" value="foo">
<div id="bar"></div>

JS:

$('#foo').change(function() { 
    $('#bar').html('yay!');
});

it works jsfiddle.net/DdyNN/2 If you need "live"-changes - use keyup event — br3t
– br3t, Commented Nov 28, 2012 at 10:07

Stefan · Accepted Answer · 2012-11-28 10:07:54Z

3

the change event triggers when you leave the textfield. I would register to the keyup or keydown event.

Links:

answered Nov 28, 2012 at 10:07

Stefan

15k17 gold badges93 silver badges155 bronze badges

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

Comments

Vucko · Accepted Answer · 2012-11-28 10:07:44Z

1

This works:

$('#foo').keyup(function() {
    if($(this).val()=='foos'){
        $('#bar').html('yay!');
    }
});

answered Nov 28, 2012 at 10:07

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Comments

Kevin · Accepted Answer · 2012-11-28 10:09:57Z

1

$.change() is for selects and not for input types. Try:

var currentvalue = $('#foo').val();
$('#foo').focusout(function(){
if($(this).val() != currentvalue){
$('#bar').html('yay!'); currentvalue = $(this).val();
}
});

answered Nov 28, 2012 at 10:09

Kevin

2221 silver badge5 bronze badges

Comments

Adil · Accepted Answer · 2012-11-28 10:09:58Z

1

Try this,

Live Demo

prv = $('#foo').val();
$('#foo').keyup(function() {
    if(prv + "s" == $(this).val()) 
       $('#bar').html('yay! success');
    else
       $('#bar').html('yay! failure'); 

        prv = $('#foo').val();
});

answered Nov 28, 2012 at 10:09

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

Sam · Accepted Answer · 2012-11-28 10:13:05Z

1

This work on key pressed on the textbox when is focus

$('#foo').focus(function() { 
   $('#foo').keyup(function(){
     if($(this).val()=='foos')$('#bar').html('yay!');
      });
});

answered Nov 28, 2012 at 10:13

Sam

2,9601 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

How can I run jQuery when text input value changes?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related