How do I bind the onchange event of a TextBox using jQuery?

Question

How can I bind an OnChange event of a TextBox to function using jQuery?

I am trying this, and it’s failing:

$(document).ready(function() {
    $("input#tags").bind("change", autoFill);
});

function autoFill() {
    $("#tags").autocomplete("/taglookup/", {
        width: 320,
        max: 4,
        highlight: false,
        multiple: true,
        multipleSeparator:",",
        scroll: true,
        scrollHeight: 300,
        delay: 10
    });
}

NB: I want to implement a Tag TextBox like the one for Stack Overflow which detects OnChange events and calls Ajax functions when a user types in.

What does exactly fail? Is the autofill not called or is it something else? — kgiannakakis
– kgiannakakis, Commented Apr 30, 2009 at 8:52
For a textbox with an autocomplete functionality, it's probably better onkeyup event. — Scott
– Scott, Commented Apr 30, 2009 at 8:57
@Eddy, why is that? Wouldn't you be better off sending the AJAX request of asap? — Drew Noakes
– Drew Noakes, Commented Sep 6, 2010 at 17:52

Chad Grant · Accepted Answer · 2009-04-30 08:52:11Z

31

You're looking for keydown/press/up

$("#inputID").keydown(function(event) {
    alert(event.keyCode);
});

or using bind $("#inputID").bind('onkeydown', ...

http://docs.jquery.com/Events

answered Apr 30, 2009 at 8:52

Chad Grant

45.6k10 gold badges67 silver badges80 bronze badges

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

3 Comments

Drew Noakes Over a year ago

I found that using keydown meant that my handler would fire on certain weird keystrokes such as ALT+TAB.

ingredient_15939 Over a year ago

Key* only works for keypresses. If you paste something in the textbox using the mouse context menu it won't fire. Using an onchange event is usually the way to go.

Chad Grant Over a year ago

@ingredient_15939 which is why my answer specifically mentions "If you're looking for KEYdown/press/up", not talking about the mouse events

Alex LE · Accepted Answer · 2010-01-22 19:48:49Z

18

You must change the event name from "change" to "onchange":

$(document).ready(function(){
        $("input#tags").bind("onchange", autoFill);
          });

or use the shortcut binder method change:

$(document).ready(function(){
        $("input#tags").change(autoFill);
          });

Note that the onchange event usually fires when the user leave the input, so for auto-complete you better use the keydown event.

edited Jan 22, 2010 at 19:48

answered Jan 22, 2010 at 19:40

Alex LE

20.8k4 gold badges32 silver badges30 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:42Z

7

Combination of keyup and change is not necessarily enough (browser's autocomplete and paste using mouse also changes the contents of a text box, but doesn't fire either of these events):

jquery change not working incase of dynamic value change

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Nov 27, 2010 at 17:12

Jakub P.

6,0962 gold badges23 silver badges21 bronze badges

Comments

spthorn · Accepted Answer · 2010-02-11 22:07:32Z

1

Here's a clue why an onchange() call might not fire your bound function:

http://jehiah.cz/archive/firing-javascript-events-properly

answered Feb 11, 2010 at 22:07

spthorn

193 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-11-24 03:12:00Z

1

I second Chad Grant's answer and also submit this blog article [removed dead link] for your viewing pleasure.

edited Nov 24 at 3:12

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 7, 2009 at 8:57

vitaminjeff

6087 silver badges9 bronze badges

3 Comments

Michael Maddox Over a year ago

That link (themaingate.net/dev/javascript/…) appears to be dead.

vitaminjeff Over a year ago

ONOZ. I hate it when that happens. I will remove the link. :(

Peter Mortensen Nov 24 at 3:12

There isn't any value in this answer. It ought to be deleted.

Peter Mortensen · Accepted Answer · 2025-11-24 03:17:43Z

1

What Chad says, except it’s better to use .keyup in this case, because with .keydown and .keypress, the value of the input is still the older value, i.e., the newest key pressed would not be reflected if .val() is called.

This should probably be a comment on Chad's answer, but I don’t have privileges to comment yet.

edited Nov 24 at 3:17

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 20, 2011 at 19:35

Ibrahim Muhammad

2,8964 gold badges32 silver badges41 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-11-24 03:14:02Z

0

If you're trying to use the jQuery autocomplete plugin, then I think you don't need to bind to onChange event. It will.

edited Nov 24 at 3:14

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 22, 2011 at 20:53

iwan

7,60918 gold badges51 silver badges67 bronze badges

Collectives™ on Stack Overflow

How do I bind the onchange event of a TextBox using jQuery?

7 Answers 7

3 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related