ChronoEngine.com homepage

Forums

Please write a review for the extension you are using on the Joomla extensions directory before posting a new question as we are being spammed by many negative reviews.

Thank you for your support!

Google Map Autocomplete on Multiple Fields

melvins138 27 Nov, 2017
Hello,

I have a form that contains a starting address and an ending address, for a trip.

I am trying to figure out the best way to get each field to autocomplete the address from google.

Here is how I have the form set up:
1) Text Field for "Starting Location" with ID of starting_location
2) Google Address widget. Google API in place, Address field ID: starting_location, Formatted result address field ID: starting_location
3) Text Field for "Destination Location" with ID of destination_location
4) Google Address widget. Google API in place, Address field ID: destination_location, Formatted result address field ID: destination_location

Now I can start typing in "destination_location" and the address will begin to auto complete. But, it will not start to autocomplete on "starting_location"

If I delete 4) Google Address widget, then the "starting_location" begins to work.

Can I have two text fields autocomplete an address?

Also, while the two text fields 1) & 3) are set up exactly the same, here is the code generate:

<div class="field "><label for="starting_location">Starting Location</label>
<input data-events="[]" placeholder="street, city, state, zip" name="starting_location" id="starting_location" value="" type="text"></div>

and

<div class="field "><label for="destination_location">Destination Location</label>
<input data-events="[]" placeholder="street, city, state, zip" name="destination_location" id="destination_location" value="" type="text" autocomplete="off"></div>

For some reason, the "destination_location" has autocomplete="off". I'm not sure why.

This is private content

Thanks in advance,
Melvins
melvins138 30 Jan, 2018
I wanted to bump this, as I have not found a solution that will work on ChronoForms.


I have tried using a custom code field and using working code from these two jsfiddles:


https://jsfiddle.net/upsidown/42usv81j/

https://jsfiddle.net/rdawkins/69Luo215/2/


I'm not sure what I am doing wrong or why these will not work on ChronoForms V5 or V6.
A version of the CFv5 form (using the first linked jsfiddle) can be viewed at: http://drive4dealers.com/index.php?option=com_chronoforms5&chronoform=AvailableDriversCFv5MapTest
Can someone point me in right direction to get two fields with google maps autocomplete.
Thanks,
Melvins
This topic is locked and no more replies can be posted.

2Checkout.com

2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for goods and services provided by ChronoEngine.com