Tag: gravity forms

Gravity Form Checkbox Values

Posted on

This post is an extension of Gravity Forms – Collecting Select Box Value.
In this demo we are capturing the values from a group of checkboxes.

Demo with Checkboxes

    Select the items to add to your order
  • ...we'll grab the checkbox values here

/**
* Wrap our JS for capturing values
*/
var checkboxHandler = {
 
 	//Change these IDs to match your form
 	checkboxFieldId: 'input_5_3',  //checkbox container ID
	outputFieldId:   'input_5_2',    //hidden field to capture values
	
	checkboxField: null,
	outputField: null,
	
    /*
	Listen to Checkboxes
	---------------------- */
    init: function() {
    
		this.outputField = document.getElementById(this.outputFieldId);
		
		if( typeof this.outputField === 'undefined' || !this.outputField ) {
			console.error('Missing output field ' + this.outputFieldId);
			return;
		}
		
        this.checkboxField = document.getElementById(this.checkboxFieldId);
        if(typeof this.checkboxField === 'undefined' || !this.checkboxField) {
			console.error('Missing checkbox field ' + this.checkboxFieldId);
            return;
        }
         
        jQuery(this.checkboxField).on(
			'change',
			'input[type=checkbox]',
			{
				checkbox: this.checkboxField,
				output:   this.outputField
			},
			this.setValues
		);
    },
    
	
    /*
	Set text (or hidden) field to list of checkbox values
    ----------------------------------- */
    setValues: function(ev) {
	
		var fields = ev.data;
        var valueString = '';
		
		jQuery(fields.checkbox).find('input:checked').each( function(i){
			valueString += this.value + ', ';
		});
		
		fields.output.value = valueString.replace(/, $/, '');
    }
};

jQuery().ready( checkboxHandler.init() );

If you are using a child theme or custom theme you can add this code to its JavaScript file.
Otherwise use WordPress’ wp_register_script and wp_enqueue_script functions to load a new file.
The value of the hidden/text box can then be included in your Gravity Forms notification.

Gravity Forms – Collecting Select Box Value

Posted on

Gravity Forms for WordPress has a select box field type, which by default uses the same data for both value and label. The field can easily be configured to have separate value and label attributes, however only the label will be sent in the form notification. In many cases this is fine, but sometimes you need the <option> value data to be sent as well as the display label.

Alternative Option: Capturing Checkbox Values

Capture the Value Attribute in a Hidden Field

One solution is to use JavaScript to capture the <select> field’s value, and copy it to a hidden form field which can be included in the email notification.

We’ll use a bit of custom JavaScript to listen to the <select> change event and update our hidden form field. This example code uses specific field ids that Gravity Forms generates. You could also write more general JS and selectors to match more scenarios if your site has multiple forms.

The Form Setup

At minimum we’ll need a select input (drop down) and a hidden field. For this demo our hidden field is actually plain text so we can see what’s happening.

Demo Product Form

  • Choose a product...
  • ...we'll grab the select option value here

Here’s the JavaScript. This example matches the IDs in the demo form. You’ll need to change those selectors to suit your form.

/**
* Wrap our JS for capturing values
*/
var selectHandler = {

	// Setup & Event listener
	// ----------------------
	init: function() {
		
		var select = jQuery('#input_3_1')[0]; //change id to match your form
		if(typeof select === 'undefined' || !select) {
			return;
		}
		
		//Set Initial Value (before change)
		selectHandler.setEmail.apply( {value: select.value} );
		
		jQuery(select).on('change', this.setEmail);
	},
	
	// Set text (or hidden) field to option value
	// (change selector to match your form)
	// ------------------------------------
	setEmail: function(ev) {
		 jQuery('#input_3_2')[0].value = this.value;
	}
};
jQuery().ready( selectHandler.init() );

If you are using a child theme or custom theme you can add this code to its JavaScript file.
Otherwise use WordPress’ wp_register_script and wp_enqueue_script functions to load a new file.
The value of the hidden/text box can then be included in your Gravity Forms notification.