Execute code on input change using jQuery

I have a form with 4 textboxes and a label at the end of the textboxes. I would like to change the label to complete once the input's value has been changed. I do not want to use a butt开发者_开发问答on to fire this event and instead would like to monitor when the field loses focus, such as through tabbing to the next input or clicking out of the current input. Tricky part is that there is a default value (ghost text) in each text box, which will have to be checked before marking the corresponding input as complete. So I am going to have to check whether the css color of the text is set to the "ghost text" color before the validation is complete.

Thanks.

Add an onblur handler, loop over all the related fields and check if they're filled in. if they are, then display your message.

$('.textfields').blur(function() {
   cnt = 0;
   $('.textfields').each(function() {
      if ((this.value != 'blur text') && (this.value != '')) {
         cnt++;
      }
   });
   if (cnt == $('.textfields').length) {
      $('.label').html('All done!');
   }
});

not tested, probably won't work, YMMV, etc...

The code below by Marc B won't work if they don't blur out of the last field. Unfortunately, there's not a good way to find out if the user is done typing in the last field unless they tab or click out of the text box. Other solutions that come to mind are onkeyup of the last text field check to see if it's equal to the buffer text that was present before, if not, then we know they have changed the text, again this seems like a really bad way to assume they are done. The simplest way is to include a submit button.

This worked fine for what i needed, thanks guys

function ontextChange() { $('input:text,textarea').keyup(function () { $('input:text,textarea').each(function () { if ($(this).val() != '') { $('[id$=lblUploadStatus]').html('Ready to upload.'); } else { $('[id$=lblUploadStatus]').html('Incomplete').css({ 'color': 'red' }); } }); }); }