I am using google API for geometric location. Currently when I type address autoplete works and mouse click the latitude and longitude append in div. My problem is if I press enter key instead of mouse click the page will refresh. Actually don;t refresh the page when select data from autoplete and enter. Please check my code below and help me to solve the problem.
<html>
<head>
<title>Place Autoplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
</head>
<body>
<form method="POST" action="#">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Erstellen</button>
</form>
<script src=".exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autoplete = new google.maps.places.Autoplete(address);
autoplete.setTypes(['geocode']);
google.maps.event.addListener(autoplete, 'place_changed', function() {
var place = autoplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_ponents) {
address = [
(place.address_ponents[0] && place.address_ponents[0].short_name || ''),
(place.address_ponents[1] && place.address_ponents[1].short_name || ''),
(place.address_ponents[2] && place.address_ponents[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autoplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
I am using google API for geometric location. Currently when I type address autoplete works and mouse click the latitude and longitude append in div. My problem is if I press enter key instead of mouse click the page will refresh. Actually don;t refresh the page when select data from autoplete and enter. Please check my code below and help me to solve the problem.
<html>
<head>
<title>Place Autoplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
</head>
<body>
<form method="POST" action="#">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Erstellen</button>
</form>
<script src="https://maps.googleapis./maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autoplete = new google.maps.places.Autoplete(address);
autoplete.setTypes(['geocode']);
google.maps.event.addListener(autoplete, 'place_changed', function() {
var place = autoplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_ponents) {
address = [
(place.address_ponents[0] && place.address_ponents[0].short_name || ''),
(place.address_ponents[1] && place.address_ponents[1].short_name || ''),
(place.address_ponents[2] && place.address_ponents[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autoplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
- possible duplicate of Stop page refreshing when 'enter' is pressed in input text element – geocodezip Commented Jan 7, 2016 at 14:31
2 Answers
Reset to default 5Enter submits your form. You need to disable that key or the submit event (e.g. using e.preventdefault() inside an appropriate event handler (key event or submit event).
A submit event is best connected to the form element and the keyboard event the same (or on document).
e.g.
$('form').submit(function(e){
e.preventDefault();
});
but you probably only need this one:
$('form').keypress(function(e) {
return e.keyCode != 13;
});
you can do this way :
var input = document.getElementById('area');
google.maps.event.addDomListener(searchBox, 'keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});