Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 515
  • Last Modified:

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

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.
0
weknowjack
Asked:
weknowjack
  • 3
  • 2
2 Solutions
 
HagayMandelCommented:
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:

$(document).ready(function(){
    $("#form_id :input").click(function(){
    $(this).val('');  
  });
});
0
 
weknowjackAuthor Commented:
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:
<?php

/**
 * @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: zoomapartmentfinder.com
0
 
HagayMandelCommented:
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:
0
 
weknowjackAuthor Commented:
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: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder?redirectlocale=en-US&redirectslug=CSS%2F%3A-moz-placeholder

and here: http://css-tricks.com/hang-on-placeholders/

Below is what works:

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

Open in new window

0
 
weknowjackAuthor Commented:
It was quicker and easier to implement with CSS
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now