Solved

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

Posted on 2013-11-16
5
419 Views
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.
0
Comment
Question by:weknowjack
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:HagayMandel
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:

$(document).ready(function(){
    $("#form_id :input").click(function(){
    $(this).val('');  
  });
});
0
 

Author Comment

by:weknowjack
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:
<?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
 
LVL 16

Assisted Solution

by:HagayMandel
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:
0
 

Accepted Solution

by:
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: 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
 

Author Closing Comment

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

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

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 https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

730 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