Question

I have a form in my sidebar that is part of a WordPress plugin and I’m not sure where the PHP code that generates the form resides, so I’d like to add a class and a value to the text input using jQuery. So far I have:

$j('body').ready(function() {
    $j('form#searchform').find(':input#s').addClass('default-value');
    $j('form#searchform').find(':input#s').val('enter search here...');
});

The class is added successfully to the html, but though the value shows in the text input, it is not added to the html, i.e. within the tag, which needs to happen for my default value script to work. So, I’m wondering if there is a way of adding the value inline?

DEFAULT VALUE SCRIPT

  $j('.default-value').each(function() {
      var default_value = $j(this).val();
      $j(this).css('color', '#837D73'); // this could be in the style sheet instead
      $j(this).focus(function() {
          if(this.value == default_value) {
              this.value = '';
              $j(this).css('color', 'black');
          }
      });
      $j(this).blur(function() {
          if(this.value == '') {
              $j(this).css('color', '#837D73');
              this.value = default_value;
          }
      });
  });

Answer 1

Your code should be working. Just make sure you add the class name
http://jsfiddle.net/fedmich/NbRBe/

and notice the

var default_value = this.value; //<-do it like this instead

Tip: you should try to use jquery chaining

You could simplify your code like this.

$j('body').ready(function() {
    $j('input#s')
        .addClass('default-value')
        .val('enter search here...');
});