Question

I’m sending POST data from text boxes to a PHP page for processing. Rather than the user clicking a save button, AJAX is used on text box events.

I’m torn between using onChange or onKeyUp.

OnKeyUp requires more processing on server, because for every key press my script has to access the database and make the change. Server performance could be an issue.

OnChange is preferred, as it only sends the changes when the user has finished on the box. However, there is a problem that if the use does not deselect the text box, the event onChange doesn’t happen, so changes aren’t saved.

Which would be best? Or is there a way to enforce onChange without the user deselecting the box?

Answer 1

You can even use the KeyUp press ajax call, how??
Just add the delayKeyUp function on keyUp event, and delayKeyUp function has setTimeout method, this would really help you out as per as server processing concern,

Note: This works fine for one method at a time.

Ex. Code:

Update:

$("selector").live('keyup', function(e) { //if jquery v1.7 or more then you can use .on event instead of .live
    delayKeyUp(function(){ ---Your Server Call Stuff -----}, 350); //delay of 350ms.
    return false;
});


var delayKeyUp = (function(){
     var timer = 0;
     return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
     };
})();