Why can't javascript/jquery-feature be applied to multiple nodes?

Question

I have a small javascript that changes the title of a input-field to it's value and some other stuff:

  function autoFill(id){
   if(jQuery(id).val()==""){
                    jQuery(id).val(jQuery(id).attr("title"))
                    .addClass("help");
             }; 
    jQuery(id).focus(function(){
    if(jQuery(this).val()==jQuery(this).attr("title")){
     jQuery(this).val("").removeClass("help");
    }
   })
   .blur(function(){
    if(jQuery(this).val()==""){
     jQuery(this).val(jQuery(this).attr("title"))
     .addClass("help");

    }
   });
   jQuery(".trip").submit(function(){
    if(jQuery(id).val() == jQuery(id).attr("title")){
    jQuery(id).val(''); 
  }

 });
  }

When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:

autoFill(".field");

Now I have to make it like this instead:

 autoFill("#driver_from");
  autoFill("#driver_to");
  autoFill("#driver_when");
  autoFill("#passenger_from");
  autoFill("#passenger_to");
  autoFill("#passenger_when");

how do I make it so that it works on every field instead?

Answer 1

Something like this would work:

function autoFill(selector){
  jQuery(selector).each(function() {
    if(jQuery(this).val() == "") {
      jQuery(this).val(jQuery(this).attr("title"))
                  .addClass("help");
    }; 
    jQuery(".trip").submit(function(){
      if(jQuery(this).val() == jQuery(this).attr("title")) {
         jQuery(this).val(''); 
      }
    });
  }).focus(function(){
     if(jQuery(this).val() == jQuery(this).attr("title")) {
        jQuery(this).val("").removeClass("help");
     }
  }).blur(function(){
     if(jQuery(this).val() == "") {
        jQuery(this).val(jQuery(this).attr("title"))
                    .addClass("help");
     }
  });
}

The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.

---

Or, rewrite it as a plugin like this:

(function($) {    
  $.fn.autoFill = function() {
     return this.each(function() {
       $(".trip").submit(function(){
         if($(this).val() == $(this).attr("title")) {
           $(this).val(''); 
         }
       });
     }).focus(function(){
        if($(this).val() == $(this).attr("title")) {
           $(this).val("").removeClass("help");
        }
     }).blur(function(){
        if($(this).val() == "") {
           $(this).val($(this).attr("title")).addClass("help");
        }
     }).blur();
  };
})(jQuery);

Then you can call it like this:

$(".field").autoFill();