I am using the "geocomplete" JQuery library (http://ubilabs.github.io/geocomplete/) for adding Google Places autocomplete to an online form, and populating hidden form fields with the returned data for the autocompleted address field.
Using the "form" example on the geocomplete site, I have this working well, and autocomplete is working, and populating all the form fields as expected.
However, I want to have TWO instances of this on the same page, so I can have an autocomplete for a start and end location.
I have both autocomplete fields added and both working. This is all fine.
The problem is that the jquery library populates only one set of input fields, with the returned Google data.
I cant see how to change this to fill in one set of fields for the start location, and another set of fields for the end location.
My jquery set up code is as follows:
$("#startgeocomplete").geocomplete({
details: "form",
types: ["geocode"],
country: 'gb'
});
$("#endgeocomplete").geocomplete({
details: "form",
types: ["geocode"],
country: 'gb'
});
And I have two input fields:
<input type="text" id="startgeocomplete" name="startlocation" value="pick-up location" />
<input type="text" id="endgeocomplete" name="endlocation" value="end location" />
And one set of hidden fields that are populated with the returned data from the Google autocomplete, eg:
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lng" value="" />
<input type="hidden" name="formatted_address" value="" />
<input type="hidden" name="postal_code" value="" />
Everything works as expected, but with only one set of fields to populate, when I enter the end location, it overwrites the data that was populated by the start location.
What I need to do is have TWO sets of hidden fields, eg:
<input type="hidden" name="start_postal_code" value="" />
<input type="hidden" name="end_postal_code" value="" />
But I cant see how this is possible to do with this jquery library?
Any clues??
Looking through the documentation, it doesn't need 2 separate forms, just 2 separate containers so you can make the hidden fields for the start one in a div with id = start and end as end and then specify separate detailsAttribute
e.g. HTML
<input type="text" id="startgeocomplete" name="startlocation" value="pick-up location" />
<input type="text" id="endgeocomplete" name="endlocation" value="end location" />
<div id="start">
<input type="hidden" data-start="lat" name="start_lat" value="" />
<input type="hidden" data-start="lng" name="start_lng" value="" />
<input type="hidden" data-start="formatted_address" name="start_formatted_address" value="" />
<input type="hidden" data-start="postal_code" name="start_postal_code" value="" />
</div>
<div id="end">
<input type="hidden" data-end="lat"name="end_lat" value="" />
<input type="hidden" data-end="lng" name="end_lng" value="" />
<input type="hidden" data-end="formatted_address" name="end_formatted_address" value="" />
<input type="hidden" data-end="postal_code" name="end_postal_code" value="" />
</div>
Javascript:
$("#startgeocomplete").geocomplete({
details: "start",
detailsAttribute: "data-start"
types: ["geocode"],
country: 'gb'
});
$("#endgeocomplete").geocomplete({
details: "end",
detailsAttribute: "data-end",
types: ["geocode"],
country: 'gb'
});