I am using google's autocomplete api just like in the docs and it works fine. However I have a form submitted with ajax every time it changes . It works fine but when I use the autocomplete for the location with the mouse (choosing a place with a click). It trigger the onchange and submits the form before The location is set.
How can I block this behaviour ? I mean submit after the mouse click on the autocomplete.
Here is a fiddle with an example : http://jsfiddle.net/8GnZB/2/
$(document).ready(function () {
$location_input = $("#location");
var options = {
types: ['(cities)'],
componentRestrictions: {
country: 'be'
}
};
autocomplete = new
google.maps.places.Autocomplete($location_input.get(0), options);
$("#search_form input").change(function () {
var data = $("#search_form").serialize();
/* Serialize form & send it to the search view */
show_submit_data(data);
return false;
});
});
function show_submit_data(data) {
$("#result").html(data);
}
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<form id="search_form" action="" method="post" >location :
<input id="location" name="location" type="text" />
<br/>data:
<input id="data" name="data" type="text" />
</form>Sent data :
<div id="result"></div>
The only work around I managed to work so far is a timeout on the change()
event but is kinda ugly.
To solve your problem you need to bind the correct event for your input, remember that library have their own events.
The object that you're using it's autocomplete
autocomplete = new google.maps.places.Autocomplete($location_input.get(0), options);
Now you can bind the event place_changed
which it's trigger when you needed, in this point you can control whatever you need.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var data = $("#search_form").serialize();
console.log('blah')
show_submit_data(data);
});
Here's a live example http://jsfiddle.net/8GnZB/7/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With