using jquery for in-place prompt text in your exposed drupal filters

posted september 30th, 2007 by john
in
when using exposed filters in drupal, it's sometimes nice to place the prompt text for a form field inside the form field itself e.g. for a very compact form. here's a way to do this using jquery.

typically when you do this, you'll want to:

  • style the text in the text field using css
  • add the prompt text in the field when the form is loaded
  • remove the prompt text when focus enters the field
  • replace the prompt text when focus leaves the field
here's what you can do.

1. find the css id of your form field

view the source of your forms page to find the css id of the field that you'd like to put the prompt text in.
<input type="text" maxlength="255" name="filter0" id="edit-filter0"  size="10" value="test" class="form-text" />
in my case, this is edit-filter0

2. create a jquery library function

create a file called inlineFieldLabel.js and store it somewhere in your theme directory. for example, if your theme is zen you might put it in zen/js/inlineFieldLabel.js. put the following function in that file
function inlineFieldLabel (label, inputid)
{
  var fieldLabel = label;         // string to put in your text input
  var textInput = $(inputid)  // your text input field
 

  /* add the field label css class to the form field and set the value */
  textInput.addClass("intra-field-label").val(fieldLabel);

  /* remove the placeholder string when field gets focus */
  textInput.focus(function()
   {
      if(this.value == fieldLabel )
      {
         $(this).removeClass("intra-field-label").val("");
      };
   });

  /* add the field label string when field looses focus */
  textInput.blur(function()
   {
      if(this.value == "")
      {
         $(this).addClass("intra-field-label").val(fieldLabel );
      };
   });

   /* if the field is set to the fieldLabel on submit, clear the field */
   form.submit(function()
   {
      if(textInput.val() == fieldLabel)
      {
         textInput.removeClass("intra-field-label").val("");
      };
   });

}

3. edit your view and insert your jquery code

edit the view that you are using and add the following to the header. make sure that you choose the php input format. i've included the code below for a field called edit-filter0 in a form called views-filters and inline field text keyword. note, you'll need to modify this slightly to include the name of your theme and the path to the inlineFieldLabel.js file.
<?php
$theme_path = drupal_get_path('theme', 'zen');
drupal_add_js($theme_path . '/js/inlineFieldLabel.js','theme');
drupal_add_js(
'$(document).ready(function() { inlineFieldLabel("keyword", "#edit-filter0");});' ,
'inline'
);
?>

4. optionally style your prompt text

optionally add style information to the css class to style your prompt text, in my case making it light grey to distinguish it from regular input text.
.intra-field-label {
  color: #777;
}
bookmark/search this post with:

When you say "edit your

on november 15th, 2007 Chad (not verified) says:

When you say "edit your view" and insert the Jquery code, where exactly are you proposing to do this at? Obviously not in Admin>>Site building >>>Views? I guess you meant in an actual file?

chad, i've refactored this

on november 15th, 2007 cailin says:

chad, i've refactored this blog entry a little to make it clearer how to deploy this in drupal. please take another read, and let us know if you have any further questions.

Please note, this entry has been closed to new comments.