By ChristianP on

Hi, I have a problem fixing an onclick function to my webform input fields. I want it so that when the user clicks on a textfield, the fields are gonna clear so they can type without having to highlight and delete. A simple user-friendly function in other words.

I have written this in the Description field for my webform:

<?php
drupal_add_js
( '
$(function () {
    $(".form-text").onclick(function () { // .form-text is the class name for the input fields.
       value("hello");  
    });
});
;'
,'inline');
?>

But to no success. However the script is working, it shows in but I am obviously doing it wrong. I can't figure it out because I'm not very good at scripting, so I need a little help. :) Could anyone point out what is wrong?

⋅ Categories: Drupal 6.x

Comments

blackarma’s picture

blackarma commented

Well with Jquery you can do this something like so

$(function(){
	$('.form-text').attr('value','hello');
	$(this).focus(function(){
		 $(this).attr('value','')
	});
});

However this will clear field every time user clicks inside that field.

If you don't want field clear only your starting value then maybe this will do

$(function(){
	$('.form-text').attr('value','hello');
	$(this).focus(function(){
		if($(this).attr('value') == 'hello'){
			$(this).attr('value','')
		}
	});
});
ChristianP’s picture

ChristianP commented

Ok, I got rid of the error with this:

<?php 
drupal_add_js(
'$(function()
{
$(".form-text").attr("value,hello");
$(this).focus(function()
{
$(this).attr("value");
});
});',
  'inline'
 );
?>

It seems to work, but nothing happens when I click on the input field.

blackarma’s picture

blackarma commented

Okey sorry i tested on my old jq source change your code to this and it should work fine

Also note that you need to seperate attribute and it's value.

this will not work (missing quotes there)

$(".form-text").attr("value,hello");

For working one this will do

			$(".form-text").attr("value","hello");
			$(".form-text").focus(function(){
					$(this).attr("value","");
			});

And for if statement this will do

			$(".form-text").attr("value","hello");
			$(".form-text").focus(function(){
				if($(this).attr("value") == "hello"){
					$(this).attr("value","");
				}
			});
ChristianP’s picture

ChristianP commented

Lol, that's weird. It worked a minute ago, then I changed something and it didn't work again. So I recopied the code, thinking I would redo what I did wrong, and it didn't work?

I also changed the class to .form-item because I couldn't find the class .form-text anywhere in the input fields using Firebug, (weirdly enough that's what I've been using when it worked as well).

I have 4 textfields (no textareas) with different prevalues:

Name Phone E-mail Message

When I click on Name, Phone, E-mail and Message, I want them to be empty and when I click outside, I want them to be filled again. Why must Drupal make it so hard? Why can't I just add the javascript onClick="this.value='';" to each input fields? I'm a total newbie when it comes to javascript, and even more newbie to jquery.

Dhipakkumaran’s picture

Dhipakkumaran commented

Hi,

Am new to drupal and php. I created the webform. In textfield i given the default value. Onclick on the textfield default value should disappear.

In firebug inspect element i checked and edit the textfield component.

<input type="text" value="e.g. John, Ingrid etc." onclick="if(this.value=='e.g. John, Ingrid etc.'){this.value=''}" onblur="if(this.value==''){this.value='e.g. John, Ingrid etc.'}">

The above script is working fine. But i dont know where to include this in webform module. Please help me to resolve this problem.

ChristianP’s picture

ChristianP commented

Hi there. I always use this script when I need this kind of function. It is jQuery.

First you need this in page.tpl.php, or html.tpl.php (if you're using Drupal 7):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Or you can take the one from jquery.com

After that line, you paste this:

  <script type="text/javascript">
	$(document).ready(function () {
swap_val = [];
 $(".webform-client-form .form-text, .webform-client-form .form-textarea").each(function(i){
swap_val[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swap_val[i]) {
 $(this).val("");
 }
 }).blur(function(){
if ($.trim($(this).val()) == "") {
 jQuery(this).val(swap_val[i]);
 }
 });
});
});
</script>

This code will automatically create a "click-to-erase" function on all textfield within the webforms. If you want to add more, just check the class name using Firebug and add it after .form-textarea for example, like this (remember the comma):

$(".webform-client-form .form-text, .webform-client-form .form-textarea, .your-class").each(function(i)

Dhipakkumaran’s picture

Dhipakkumaran commented

Thanks christian.

jhemsley30’s picture

jhemsley30 commented

Christian,
Thank you, that code seems to be working perfect. Exactly what I was looking for.