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.

9 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

    1. It’s possible, but the simplest way would just be to set the input values to be the same as the label.

      Is there a reason you cannot set them that way?

      1. Hi thanks for your answer. I need to set the value to a number because it will be used with mycred plugin to credits for each option the user will choose, but I also need to collect and pass to another field the description text of each checkbox checked. Many thanks for your help

        1. Hey, try this Francesco.
          Use my code above, but replace the setValues method with this version. It finds the corresponding label and uses its innerText value.

          setValues: function(ev) {
  
    var fields = ev.data;
    var valueString = '';
      
    jQuery(fields.checkbox).find('input:checked').each( function(i) {
        //Append corresponding label text
        let labelID = this.id.replace(/^choice\_/, 'label_');
        let label   = document.getElementById(labelID);

        if( typeof label === 'undefined' ) {
          console.error(labelID + ' label element not found');
        }
        valueString += label.innerText + ', ';
    });
    //beware if labels contain commas.
    //will conflict with valueString separator

    fields.output.value = valueString.replace(/, $/, '');
}

          1. Hi you are a star, many thanks, is there any way i can use both? I mean with one javascript code passing the value of check box to a field and the label to another field?
            Many thanks and happy christmas

          2. Thanks. Yes that’s all possible. If you compare my original code in the blog post, and the modified version in my comment above you should see the selector and DOM access code that captures those values and puts them somewhere. You can modify that to update a different field. You’d need that field’s ID to be able to select and update it.

            If you need specific help with your situation you could hire me to customize the script further.

Comments are closed.