Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • 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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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