Require Place Selection

Instructions

  1. Install our free Custom Javascript for Gravity Forms plugin.
    Download the plugin here: https://gravitywiz.com/gravity-forms-code-chest/
    
    1. Copy and paste the snippet into the editor of the Custom Javascript for Gravity Forms plugin.
    2. Change addressFieldId to the Address Field’s ID

Code

Filename: gpaa-require-selection.js

/**
 * Gravity Perks // GP Address Autocomplete // Require Place Selection
 * https://gravitywiz.com/documentation/gravity-forms-address-autocomplete
 *
 * Instruction Video: https://www.loom.com/share/e97dee6de5fa4741a1171f6d6e39b95d
 *
 * Instructions:
 *     1. Install our free Custom Javascript for Gravity Forms plugin.
 *        Download the plugin here: https://gravitywiz.com/gravity-forms-code-chest/
 *     2. Copy and paste the snippet into the editor of the Custom Javascript for Gravity Forms plugin.
 *     3. Change addressFieldId to the Address Field's ID
 */
// Snippet variables
var addressFieldId = 1;
// End snippet variables

var $ = window.jQuery;
var addAction = window.gform.addAction;

// Set all inputs in the Address Field to read only by default
$('#field_GFFORMID_' + addressFieldId + ' input').prop('readonly', true);

// Disable individual options in the select as select's cannot be readonly.
// When an Address is selected, the selected country will have the disabled prop removed.
$('#field_GFFORMID_' + addressFieldId + ' select option').prop('disabled', true);

// Re-enable Address Line 1
$('#input_GFFORMID_' + addressFieldId + '_1').prop('readonly', false);

addAction('gpaa_fields_filled', function (place, instance, formId, fieldId) {
    if (formId !== GFFORMID || fieldId !== addressFieldId) {
        return;
    }

    var $addressLine1 = jQuery('#input_GFFORMID_' + fieldId + '_1');
    $addressLine1.data('gpaa-filled-value', $addressLine1.val());

    // Re-disable all countries and re-enable the selected country
    $('#field_GFFORMID_' + fieldId + ' select option').prop('disabled', true);
    $('#field_GFFORMID_' + fieldId + ' select option:selected').prop('disabled', false);
});

$('#input_GFFORMID_' + addressFieldId + '_1').on('blur', function () {
    var $this = $(this);
    var filledValue = $this.data('gpaa-filled-value');

    if (!filledValue) {
        filledValue = '';
    }

    $this.val(filledValue);
})

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.