How to only execute jquery code if input is greater then 0 and is a letter key?

Question

So i’v been going though the tutorial on: http://jqueryfordesigners.com/play-school-easy-ajax-load/ (site seems a bit slow at the moment BTW)

I’v tried using:

if(this.value.length > 0) {

But it doesn’t seem to work. When I type something into the input forum it will load the test1.php every time even if I just press say shift. (this is not what I want, I want it to only refresh if I type in a actual letter or number)

The main javascript I’m working with:

$(document).ready(function () {
    $('#name').keyup(function () {
      // if(this.value.length > 0) {
        $('#results ul').load(
            'test1.php #results li'
          , { name : this.value }
        );
      // }
    });
});

Any pointers?

Answer 1

$(document).ready(function () {
  $('#name').keyup(function () {
    // console.log(this.value);
    if(this.value.length > 0) {  
      $('#results ul').load('test1.php #results li', { name : this.value });
    }
   });
});

Should work. Try adding some alert("test"); here and there and seeing when they pop up. Or use firebug to step through the code executing.

---

Edit

It seems you want it to only load the page if an actual character key is pressed. There are several ways to do this, but the simplest method is probably to compare the value of the box to the previous value, the one it had before the key was pressed:

$(document).ready(function () {
  $('#name').keyup(function () {
    if(this.value != $(this).attr("data-old-value") && this.value.length > 0) {  
      $(this).attr("data-old-value", this.value);
      $('#results ul').load('test1.php #results li', { name : this.value });
    }
   });
});

This will only work if you use keyup (tested in firefox).

Answer 2

Have you tried using keypress instead of keydown? Keypress won't fire when you only press a modifier key.

$(document).ready( function() {
     $('#name').keypress( function() {
         $('#results ul').load('test1.php #results li', { name : $(this).val() } );
     });
});

Note, also, that I changed it to use jQuery to get the value of the element as well. If you want more control over which keys trigger the AJAX call, use a parameter for the event and check the keyCode value.

 $('#name').keypress( function(e) {
      if ((e.keyCode >=48 && e.keyCode < 58) // numbers
          || (e.keyCode >= 65 && e.keyCode < 91) // uppercase
          || (e.keyCode >= 97 && e.keyCode < 123)) { // lowercase
          ...
      }
 });