De PHPhulp kroeg
raar gedrag Google Autocomplete (Places API)
Ik typ een willekeurige stad in en ga met mijn cursor naar beneden en kies de stad middels enter.
Hierna wordt het formulier meteen verzonden. Als ik de postwaarden bekijk in test.php dan staat daar helemaal niks! Als ik de stad helmaal intyp dan gaat het soms wel en soms niet goed.
Wie kan dit verklaren en hoe kan ik dit oplossen?
Na het kiezen van de stad mag het formulier wel meteen verstuurd worden maar dan wel graag met een waarde ;-) .
test.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
//alert("This function is working!");
//alert(place.name);
// alert(place.address_components[0].long_name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form action="test.php" method="POST">
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" >
<input type="hidden" id="city2" name="city2" >
<input type="hidden" id="cityLat" name="cityLat" >
<input type="hidden" id="cityLng" name="cityLng" >
<input type="submit">
</form>
</body>
</html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
//alert("This function is working!");
//alert(place.name);
// alert(place.address_components[0].long_name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form action="test.php" method="POST">
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" >
<input type="hidden" id="city2" name="city2" >
<input type="hidden" id="cityLat" name="cityLat" >
<input type="hidden" id="cityLng" name="cityLng" >
<input type="submit">
</form>
</body>
</html>
test.php
Er zijn wel oplossingen te vinden via google i.c.m. jQuery.
Gewijzigd op 27/05/2014 09:37:43 door Michael -
Oplossing is wat lastig, omdat je geen controle hebt over de eventhandler van de auto complete. Wat je kan doen is je button vervangen door een link (en eventueel stylen als een button) of een ander type button, zodat de enter toets niet meer als form submit wordt gezien. Je zal dan alleen het form moeten submitten via een javascript eventhandler op de click op die nieuwe button of link.
http://www.webdevdoor.com/demos/google-places-autocomplete-demo/
Toevoeging op 27/05/2014 21:00:25:
nou ja...
Ik weet nog niet wat het probleem was maar m.b.v. bovenstaande link heb ik nu iets gemaakt wat werkt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<form action="javascript:void(0);" name="form1" id="form1">
<input type="text" name="location" class="textbox" id="location" value="" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="details-box">
test
</div>
</div>
<script type="text/javascript">
var input = document.getElementById('location');
var place;
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
});
$(document).on("click", ".submit", function () {
var lat = place.geometry.location.lat();
var lon = place.geometry.location.lng();
var city = place.name;
$.ajax({
type: "POST",
data: { lat: lat, lon: lon, city:city },
cache: false,
url: "g.php",
success: function (data) {
$("#details-box").html(data);
}
});
});
input.addEventListener('click', function(){
input.value = "";
});
</script>
</body>
</html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<form action="javascript:void(0);" name="form1" id="form1">
<input type="text" name="location" class="textbox" id="location" value="" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="details-box">
test
</div>
</div>
<script type="text/javascript">
var input = document.getElementById('location');
var place;
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
});
$(document).on("click", ".submit", function () {
var lat = place.geometry.location.lat();
var lon = place.geometry.location.lng();
var city = place.name;
$.ajax({
type: "POST",
data: { lat: lat, lon: lon, city:city },
cache: false,
url: "g.php",
success: function (data) {
$("#details-box").html(data);
}
});
});
input.addEventListener('click', function(){
input.value = "";
});
</script>
</body>
</html>