raar gedrag Google Autocomplete (Places API)

Door N K op 26-05-2014 20:33

2.161 views

Er gebeurt m.i. iets vreemds met onderstaand formulier.
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


<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;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


<html>
    <head>
    </head>
    <body>
            <?php print_r($_POST);?>
    </body>
</html>

Mich

27-05-2014 09:14 gewijzigd op 27-05-2014 09:37

Als je een plaats uit de lijst kiest met spatie of muisklik dan werkt het prima, maar zodra je met de pijltjes een keuze maakt en op enter drukt wordt deze niet ingevuld. Dit probleem zou je denk ik in de javascript moeten zoeken, maar weet niet precies hoe.

Er zijn wel oplossingen te vinden via google i.c.m. jQuery.

Erwin H

27-05-2014 09:44

Zal er waarschijnlijk mee te maken hebben met het feit dat het selecteren van de stad werkt op een eventhandler voor de enter toets. Je form wordt ook verstuurd als je op enter klikt binnen het form, aangezien je een submit button in het form hebt. Die twee events worden in feite tegelijktertijd aangeroepen en de afhandeling van de enter van de autocomplete is blijkbaar nog niet klaar op het moment dat het form al verstuurd wordt. Voor het oog misschien wel, voor de browser niet.

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.

Mich

27-05-2014 10:16

Even ter verduidelijking van dit topic, het klopt inderdaad dat met enter je een error krijgt dat de variabelen place.name/location niet bestaan. Er zijn verschillende jQuery oplossingen hiervoor te vinden.

N K

27-05-2014 20:07

waarom gaat het wel goed op deze pagina?
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.


<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;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>

Reageren

Inloggen om te reageren