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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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 …
This video discusses moving either the default database or any database to a new volume.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now