Use Single Line Text field as Autocomplete Input
Use a single line text field as autocomplete input and populate the single line text field with the full address.
Instructions
Code
Filename: gpaa-single-line-as-input.php
<?php
/**
* Gravity Perks // Address Autocomplete // Use Single Line Text field as Autocomplete Input
* https://gravitywiz.com/documentation/gravity-forms-address-autocomplete/
*
* Instruction Video: https://www.loom.com/share/2a8b9d546bf345cfa2e18294af0dbfdb
*
* Use a Single Line Text field as autocomplete input and populate the Single Line Text field with the full address.
*
* Note: This snippet will require the user to make a selection from the auto-suggested addresses.
*
* Plugin Name: GP Address Autocomplete - Use Single Line Text field as Autocomplete Input
* Plugin URI: https://gravitywiz.com/documentation/gravity-forms-address-autocomplete/
* Description: Use a single line text field as autocomplete input and populate the single line text field with the full address.
* Author: Gravity Wiz
* Version: 0.2
* Author URI: https://gravitywiz.com/
*/
class GPAA_Single_Line_Input {
private $_args = array();
public function __construct( $args = array() ) {
$this->_args = wp_parse_args( $args, array(
'form_id' => false,
'address_field_id' => false,
'single_line_field_id' => false,
) );
add_action( 'init', array( $this, 'init' ) );
}
public function init() {
add_filter( 'gform_pre_render', array( $this, 'load_form_script' ), 10, 2 );
add_filter( 'gform_register_init_scripts', array( $this, 'add_init_script' ), 10, 2 );
add_filter( 'gpaa_init_args_' . $this->_args['form_id'] . '_' . $this->_args['address_field_id'], array( $this, 'add_gpaa_init' ), 10, 2 );
}
public function load_form_script( $form, $is_ajax_enabled ) {
if ( $this->is_applicable_form( $form ) && ! has_action( 'wp_footer', array( $this, 'output_script' ) ) ) {
add_action( 'wp_footer', array( $this, 'output_script' ) );
add_action( 'gform_preview_footer', array( $this, 'output_script' ) );
}
return $form;
}
public function output_script() {
?>
<script type="text/javascript">
( function( $ ) {
window.GPAASingleLineInput = function( args ) {
let $input = $('#input_' + args.formId + '_' + args.singleLineFieldId );
gform.addFilter('gpaa_values', function (values, place, gpaa, formId, fieldId) {
if ( args.formId == formId && args.addressFieldId == fieldId ) {
if ( args.useFullAddress ) {
// Logic borrowed from https://github.com/gravitywiz/snippet-library/pull/730
var fullAddress = gpaa.inputs.autocomplete.value;
values.autocomplete = fullAddress;
values.address1 = fullAddress.split(',')[0].trim();
} else {
values.autocomplete = place.formatted_address;
}
$input.data('gpaa-filled-value', place.formatted_address);
}
return values;
});
$input.on('blur', function () {
var filledValue = $(this).data('gpaa-filled-value');
if (!filledValue) {
filledValue = '';
}
$(this).val(filledValue);
})
}
} )( jQuery );
</script>
<?php
}
public function add_init_script( $form ) {
if ( ! $this->is_applicable_form( $form ) ) {
return;
}
$args = array(
'formId' => $this->_args['form_id'],
'addressFieldId' => $this->_args['address_field_id'],
'singleLineFieldId' => $this->_args['single_line_field_id'],
'useFullAddress' => $this->_args['use_full_address'],
);
$script = 'new GPAASingleLineInput( ' . json_encode( $args ) . ' );';
$slug = implode( '_', array( 'gppa_single_line_input', $this->_args['form_id'], $this->_args['address_field_id'] ) );
GFFormDisplay::add_init_script( $this->_args['form_id'], $slug, GFFormDisplay::ON_PAGE_RENDER, $script );
}
public function add_gpaa_init( $args ) {
$args['inputSelectors']['autocomplete'] = '#input_' . $this->_args['form_id'] . '_' . $this->_args['single_line_field_id'];
return $args;
}
public function is_applicable_form( $form ) {
$form_id = isset( $form['id'] ) ? $form['id'] : $form;
return empty( $this->_args['form_id'] ) || (int) $form_id == (int) $this->_args['form_id'];
}
}
// Configuration
new GPAA_Single_Line_Input( array(
'form_id' => 123, // The ID of your form.
'address_field_id' => 4, // The ID of the Address field.
'single_line_field_id' => 5, // The ID of the Single Line Text field.
// 'use_full_address' => true, // Uncomment to use the full street address if you don't want an abbreviated street address.
) );
Hi, I have added this Snippet to website set to run on all pages. On Gravity form We have set one as Single Line Text Field and Address Field. We have “enabled Google Address Autocomplete” on Address field. But it’s not working as video demonstration.
Let me know if something I have missed.
Hi Aakash,
Have you updated the snippet configuration which is at the bottom of the snippet with the respective IDs as commented? If you’ve already done that, and it’s still not working, please submit a ticket for this so we can take a closer look at the setup and assist you to get it working.
Best,
how can i use this 2x in one page
Hi Mufutau,
To use the snippet on multiple forms, you’ll need to create multiple instances of the Class by duplicating the configuration and updating it with the correct parameters and values. You can read more about that here: https://gravitywiz.com/documentation/apply-class-based-snippet-different-forms/
Best,