How to Make Default Value Disappear or Appear Whenever User Click – Webform Module

• July 27, 2013
• Jesandy
• 3 comments

Problem: The default value do not disappear or appear whenever user click

Module: Webform – Drupal 7

Step by Step how to solve:

#1 Open Your Cpanel

#2 go to your public_html and find your folder “js” on your theme folder >> yoursites/public_html/sites/all/themes/yourtheme/js/

#3 add new file, call anything you want, end with .js >> yourfilename.js

#4 And now back to your public_html and go to your public_html and find file end with .info (this should be yourthemename.info) and open the file

#5 Find code ; Scripts and under it insert the file name that you just created on #3 >> the code should be like this

scripts[] = 'js/submitfield.js'

See the image below for example

#6 Go back to your yourfilename.js that you just created, open it and put this code:

var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
jQuery(document).ready(function() {
jQuery("input.form-text").css("color", inactive_color);
var default_values = new Array();
jQuery("input.form-text").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
jQuery(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
});
jQuery(document).ready(function() {
jQuery("textarea.form-textarea").css("color", inactive_color);
var default_values = new Array();
jQuery("textarea.form-textarea").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
jQuery(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
});
/* jQuery(".webform-client-form input:text, .webform-client-form textarea").each(function(i){
jQuery(this).data("default", this.value).bind("focus", function(e){
if (jQuery.trim(this.value)==jQuery(this).data("default")) this.value = "";
}).bind("blur", function(e){
if (jQuery.trim(this.value).length==0) this.value = jQuery(this).data("default");
});
}); */

Save the file

#7 Your webform should be worked as expected, if still not working go to performance and clear the chache

All the code I just got from this link hope it’s worked on you