How to set click to erase value in input field in Drupal 7 theme

Posted on 2013-11-16
Last Modified: 2014-02-15
I have a form in a Drupal site that has values set for each field. I need the place and script to use so the values disappear on click in the field. Currently, they will only vanish when the use starts typing. I suppose it requires a jquery or javascript entry somewhere but I don't know where or how. I am not a coder, but can follow instructions.
Question by:weknowjack
  • 3
  • 2
LVL 16

Expert Comment

ID: 39654130
Use the following method:
1. Get the form's id. (view page source)
2. Suppose the form's id is 'form_id', add this javascript code:

    $("#form_id :input").click(function(){

Author Comment

ID: 39654503
Thank you, but where would I place that code after I find the ID of the form? The form is using a module called Field Placeholder, and the form itself appears as a Content type under Content and shows on all pages. There is a module called field_placeholder.api.php in the sites/all/modules folder. Is that it? It has no closing ?php> tag.

That file currently shows:

 * @file
 * Hooks for field_placeholder module.

 * Define field placeholder supported widgets.
 * @return
 *   An array whose keys are the widget names and whose value are the widget
 *   item where the placeholder will be attached.
function hook_field_placeholder_info() {
  return array(
    'text_textfield' => 'value',
    'number' => 'value',
    'email_textfield' => 'email',

Open in new window

URL of site:
LVL 16

Assisted Solution

HagayMandel earned 250 total points
ID: 39654722
Use form_alter in your template.php file to add this small jQuery script.
Here is an explanation on hook_form_alter.
And here is a sample code on how to add the script:

Accepted Solution

weknowjack earned 0 total points
ID: 39654884
I'm sorry. Thank you for your help, but I found your solution unclear. I looked at the references and what we tried broke the template.php

Probably due to the fact that we are not coders. As I have found with other recommended solutions, the authors assume we have some level of php knowledge required to implement the suggestions. We don't.

We found way simpler solution using CSS in two sites, here:

and here:

Below is what works:

[placeholder]:focus::-webkit-input-placeholder {
     color: transparent;
[placeholder]:focus::-moz-placeholder {
     color: transparent;

Open in new window


Author Closing Comment

ID: 39861165
It was quicker and easier to implement with CSS

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is for those that are having major problems with users upload files such as pictures to their profile. The solution is simple and has to do with correcting the directory paths. With some experimenting and testing i got it fixed. Note…
RTL (right to left) web applications aiming for audiences speaking languages like Hebrew or Arabic, are generally more complicated than the same applications aiming for audiences speaking Latin based languages. The main difference lies of course …
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit If you want to manage em…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question