Question

I’m using this code on a simple form. Please can you tell me why this code works

$(document).ready(function(){

    $(":input").focus(function() {
        $(this).keyup(function(){
            if (this.value != this.lastValue) {
                $.post("ajax-validation.php", { "username" : $(this).val() },
                function(data){
                    $("#display").html(data);
                });
                this.lastValue = this.value;
            };
        });
    });

});

and this not?

$(document).ready(function(){

    $(":input").focus(function() {
        $(this).keyup(function(){
            if (this.value != this.lastValue) {
                $.post("ajax-validation.php", { $(this).attr("name") : $(this).val() },
                function(data){
                    $("#display").html(data);
                });
                this.lastValue = this.value;
            };
        });
    });

});

It’s a very strange thing!!

Answer 1

It’s not. $(this) has no context where you put it. You need to cache it and reuse it. Like so:

$(document).ready(function() {

    $(":input").focus(function() {
        $(this).keyup(function() {
            var el = $(this), theName = el.attr("name"), data = {};
            data[theName] = el.val();
            if (this.value != this.lastValue) {
                
                $.post("ajax-validation.php", data , function(data) {
                    $("#display").html(data);
                });
                //console.log(el.attr("name"), el.val());
                this.lastValue = this.value;
            };
        });
    });

});

CODE CORRECTED! It appears that the use of methods (even if it returns a string) is not allowed. So I put it in another variable and used it there. Tested and works. (see the requests with dev tools or firebug)

CODE CORRECTED! AGAIN! It appears as though $.post doesn’t like variables (it treats them as strings), so I define the data object outside the $.post method, and pass it in. Works like a charm.

Important points to consider

• The code is correct but not robust, meaning, it will work exactly as you asked in the answer, but it might, and it will choke your server with endless requests in case of an attack. You should:

  • Make a timer (with setTimeout to throttle the requests (only after 3-4 seconds with no editing).
  • Make sure you’re safe on the server-side, don’t allow many requests from the same connection. Use the connection info in conjunction with a global counter (saved on a database or a text file) to determine if the user is abusing your system, and block it.

• You should, (in my opinion) have a validate button (or link, or whatever) to check whether the input is valid, rather then automatically validating on keypress.