Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I bind onchange event of a TextBox using JQuery?

Tags:

html

jquery

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

Am trying this and its 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 stackoverflow which detects OnChange events and calls AJAX functions when a user types in.

like image 205
gath Avatar asked Apr 30 '09 08:04

gath


People also ask

How can I bind to the change event of a textarea in jQuery?

$('. detect-change') . on('change cut paste', function(e) { console.

How do you trigger an event when a textbox is filled with value?

change function , but that needs to be done only if the the value is changed using the button . $("#address"). change will trigger if you perform any change in text field. If you want to trigger alert only when button click why you don't use alert inside button click function.

How do you get an event on Onchange?

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed. Tip: This event is similar to the oninput event.

How do I use Onchange input tag?

Definition and UsageThe onchange attribute fires the moment when the value of the element is changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus.


6 Answers

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

like image 99
Chad Grant Avatar answered Sep 28 '22 22:09

Chad Grant


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.

like image 42
Alex LE Avatar answered Sep 28 '22 22:09

Alex LE


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

like image 27
Jakub P. Avatar answered Sep 28 '22 20:09

Jakub P.


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

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

like image 35
spthorn Avatar answered Sep 28 '22 20:09

spthorn


What Chad says, except its 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 dont have privileges to comment yet.

like image 23
Ibrahim Muhammad Avatar answered Sep 28 '22 20:09

Ibrahim Muhammad


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

like image 22
vitaminjeff Avatar answered Sep 28 '22 21:09

vitaminjeff