Custom jQuery -Default value for Name field, Clearit + move labels + description

Gravity Support Forums » Plugin Support » Gravity Forms

redhillcrea.tv
Member

Hi Team,

I have been trying to add the following custom jQuery scripts to my Gravity Forms:

Add default value for Name field(s)
http://www.gravityhelp.com/forums/topic/add-default-value-for-name-fields

Clearing Default Field Values with jQuery
http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

Change position of sub-labels on advanced fields
http://www.gravityhelp.com/forums/topic/change-position-of-sub-labels-on-advanced-fields

Request setting to place field descriptions above fields
http://www.gravityhelp.com/forums/topic/request-setting-to-place-field-descriptions-above-fields#post-12697

I have incorporated all of them into a single gravityforms.js file that looks like this:

// clear default field values OnFocus
jQuery(document).ready(function() {

	jQuery.fn.cleardefault = function() {
	return this.focus(function() {
		if( this.value == this.defaultValue ) {
			this.value = "";
		}
	}).blur(function() {
		if( !this.value.length ) {
			this.value = this.defaultValue;
		}
	});
};
jQuery(".clearit input, .clearit textarea").cleardefault();

});

// Default value for Name fields
jQuery(document).ready(function() {
	jQuery("#input_1_2.3").attr("value", "enter your first name");
	jQuery("#input_1_2.6").attr("value", "enter your last name");
});

// Move Sub labels ABOVE input fields & select fields
      jQuery(document).ready(function() {

          jQuery('.ginput_container label').each(function(i,e){
              fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
              jQuery(e).siblings('.ginput_container input').before(fielddesc); //moves sub label above input fields
              jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
              jQuery(e).remove();
          });

      });

// Place field descriptions above fields

	jQuery(document).ready(function() {

		jQuery('.gfield_description').each(function(i,e){
		    fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
		    jQuery(e).siblings('label.gfield_label').after(fielddesc);
		    jQuery(e).remove();
		});

	});

Then I have called the file in my header.php file,:

<!-- gravity form jQuery addons -->
<script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/js/gravityform.js"></script>
</head>

As you can see, I have placed this just before </head>, so that it loads after the jQuery script in my theme.

Problem is, THIS DOES NOT WORK on the form.

Am i missing something?

Thanks in advance

Posted 12 years ago on Friday April 27, 2012 | Permalink

redhillcrea.tv
Member
Ok,

So here is an update for anybody interested:

1. // Clear default field values OnFocus
WORKS, just don't forget to add "clearit" to the CSS class name.

2 // Default value for Name fields
WORKS, but you will need to change #input_1_1.3 to #input_1_1_3 and #input_1_1.6 to #input_1_1_6 (or what ever your own custom #input ID is. Each form is different, so you should use Firebug to check it.

3: // Move Sub labels ABOVE input fields & select fields
Still working on it. One thing that I have thought of was to simply NOT display the sub labels at all, as I was changing the default value to First name and Surname already.so I added display: none; to my theme css like this:
```
/* First Name (Left) Text */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {
	color:  #000000;
	display: none;
	}	

/* Last name (Right) Text */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {
	color: #000000;
	display: none;
	}
```
This forces the sub labels to NOT display.

4: // Place field descriptions above fields
Still working on it.
Posted 12 years ago on Friday April 27, 2012 | Permalink
redhillcrea.tv
Member
Btw,

I changed the location of the gravityforms.js file to /wp-content/uploads/custom/gravityform.js and change the header.php file to:
```

<script type="text/javascript" src="/wp-content/uploads/custom/gravityform.js"></script>
</head>
```
This is to move the file out of the theme folder so that theme updates wont delete the gravityforms.js file by mistake :)
Posted 12 years ago on Friday April 27, 2012 | Permalink