Problem invoking a function on change event.

Question

Hi Folks,

I am trying to invoke an ajax call as soon as my input fields length is 15 (for now I have just put in an alert box in place of .ajax{ }), but the alert box is not firing up until I click somewhere on the screen after input field is filled with 15 characters. what am I doing wrong here?

$("#serialCode").change(function () {
    var d = $("#serialCode").val();
    if (d.length == 15) {
        var $code = d.substring(0, 9);
        alert('Serial code ' + $code);
    }
    $(this).val("");
});

Answer 1

The change event doesn't fire until you lose focus on the input.

Try using keyup instead:

$("#serialCode").keyup(function () {
    var d = this.value;
    if (d.length == 15) {
        var $code = d.substring(0, 9);
        alert('Serial code ' + $code);
    }
  //  this.value = '';
});

You should note that people can get around this by using the GUI to paste text into the input, so you may want to add the same functionality on change as well.

$("#serialCode").bind('keyup keydown change', function () {

Because there are multiple events, you should have some sort of flag that is set when the AJAX request is sent, so you're not sending it multiple times.

Answer 2

You'll likely want to use keypress instead of keyup or keydown, as those won't be called for subsequent characters if someone holds a key down.

$("#serialCode").keypress(function () {
    var d = $("#serialCode").val();
    if (d.length == 15) {
        var $code = d.substring(0, 9);
        alert('Serial code ' + $code);
    }
    $(this).val("");
});

Answer 3

I wrote a blog post earlier today on why onkeyup isn't a great idea for detecting user input. The better option is to either use onkeydown with a 0ms timer, or a combination of the newer HTML 5 event oninput for standards compliant browsers and onpropertychange in Internet Explorer.

These two events will handle other forms of input such as cut, paste, undo, redo, drag and drop, and even changes made by a native spell checker.

Something like this should work for you:

// Check for which event we need to bind to, onpropertychange or oninput
var evt = "onpropertychange" in document.body ? "propertychange" : "input";
$("#serialCode").bind(evt, function (event) {
    // For the onpropertychange event, check that the value property changed
    if (evt == "propertychange" && event.propertyName != "value")
        return;
    var d = $("#serialCode").val();
    if (d.length == 15) {
        var $code = d.substring(0, 9);
        alert('Serial code ' + $code);
    }
    $(this).val("");
});

Note that if you need to support older browsers, you'll need to use some form of event detection to see if these events are available and if not, fall back to the keydown with timer method.

Answer 4

i experienced issues with the jQuery ajax interface. those issues disappeared when i decided to just use to javascript only interace.

see this link hosted at IBM. once you read this you will never again have a question with how ajax does or should function.