Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Autofill a set of fields (in a gravity form, in this case) based on a checkbox being checked.
jQuery(document).ready(function($) {
$('input#choice_13_1').click(function() {
if($(this).is(':checked')) {
$('#input_2_12_1').val($('#input_2_2_1').val());
$('#input_2_12_2').val($('#input_2_2_2').val());
$('#input_2_12_3').val($('#input_2_2_3').val());
$('#input_2_12_4').val($('#input_2_2_4').val());
$('#input_2_12_5').val($('#input_2_2_5').val());
};
});
});
@GaryJones

This comment has been minimized.

Copy link

GaryJones commented Jan 25, 2012

An alternative suggestion for you to consider (untested):

/**
 * Copy values from one field to another if a checkbox is checked.
 * 
 * This function can be re-used - it should be bound to a checkbox element,
 * and passed an object of paired data - { sourceID: destinationID }.
 */
function gmj_copy_fields_if_checked(event) {
    'use strict';

    // Check if checkbox is checked - if not, abort
    if ( ! jQuery(event.target).is(':checked')) {
        return;
    }

    // Loop though fields and assign values
    jQuery.each(event.data, function (key, value) {
        jQuery('#' + key).val(jQuery('#' + value).val());
    });

    // That's it! All we needed to know was the checkbox and the field data, and
    // that's passed through from the element(s) we're bound to, and the data
    // that was sent through at the same time.

}

jQuery(function ($) {
    'use strict';

    // Make an object of data pairs - this could be filtered, made global,
    // pulled out into a wider scope, passed in from PHP via localize script,
    // whatever - we're disassociating our data from the the process we want to
    // run it through to allow code re-use.
    var fields = {
        'input_2_12_1' : 'input_2_2_1',
        'input_2_12_2' : 'input_2_2_2',
        'input_2_12_3' : 'input_2_2_3',
        'input_2_12_4' : 'input_2_2_4',
        'input_2_12_5' : 'input_2_2_5'
    };

    // Bind namespaced event to handler, and pass through fields data.
    // Using namespaces allows us or someone else to be picky about unbinding
    // a handler from a particular event.
    $('#choice_13_1').on('click.gmj', fields, gmj_copy_fields_if_checked);

    // You could have another variable object similar to fields, and you could
    //bind that to some other checkbox, but still use the same function e.g.
    // var = fields2 = { ... }
    // $('#choice_18_2').on('click.gmj', fields2, gmj_copy_fields_if_checked);

});
@tareqhi

This comment has been minimized.

Copy link

tareqhi commented Sep 20, 2014

hi, tnorthcutt & Gary Jones, Thanks for this awesome tweak. Basically i am looking for this code since long time. But the problem praised here is- how to implement this code in my form? Should i copy the code to my theme's function.php file? or some other way?
Please provide the information to use the code.

@niz-yar

This comment has been minimized.

Copy link

niz-yar commented Feb 26, 2015

Has anyone got this working?

@saltmktg

This comment has been minimized.

Copy link

saltmktg commented Dec 26, 2015

Works well here. Thanks a lot.

@schiem

This comment has been minimized.

Copy link

schiem commented Dec 28, 2015

For anyone still wondering, this needs to go in a javascript file that gets enqueued in functions.php, as here, and should be placed in document.ready(). Another way to do it more generally is the following:

function bindGformHandlers() {
    //bind the click function
    $(document).on('click', '.fill-check input', function() {
        if($(this).is(':checked')) {

            //put in the selectors we fill from
            var fill_from = $('.fill-from, .fill-from .name_last, .fill-from .name_first');
            fill_from.each(function() {

                //get the label
                label = $(this).find('label').text();
                //get the value
                value = $(this).find('input').val();

                //attempt to fill the new field with the value
                to_fill = $('.to-fill label:contains("' + label + '")').siblings().find('input').val(value);
                if(to_fill.length < 1) {
                    //this is so name fields will work
                    to_fill = $('.to-fill label:contains("' + label + '")').siblings('input').val(value);
                }   

            }); 
        }   
    }); 
}

Then all you need to do is create a checkbox with the CSS class "fill-check," give the fields you want to fill from the class "fill-from," and give the fields you want to fill into the class "to-fill" (classes can be added under the "appearance" tab on forms). As long as the labels for the fields are the same, it should work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.