Gravity Form Checkbox Values

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.

3 thoughts on “Gravity Form Checkbox Values

  1. hi many thanks for your post is very interesting. How can I pass the checkbox value and record it as new value for the other fiedl?

  2. Hi thanks for your answer, what i’m trying to do is implement gravity forms with mycred plugin.
    Basically i’m using gravity form hook prebuilt addon for mycred.
    I can change the field label to mycred_amount and then if i set up a manual default value it will add or remove points when the form is submitted.
    What i’m trying to achieve is setting up the default value in the mycred_amount hidden field based on what the user choices are on the checkbox field.
    I’ve tried your snippet and it works fine, like in your demo it does show the checkbox value inside the mycred_amount field but when i submit the form points are not added or removed.
    I’ve also tried to edit your snippet replacing fields.output.value = valueString.replace(/, $/, ”); with fields.output.defaultValue = valueString.replace(/, $/, ”);
    but still no success 🙁 i’m wondering if you could help me. Many thanks

Leave a Reply

Your email address will not be published. Required fields are marked *