Levi Stroop Levi Stroop - 4 months ago 5x
HTML Question

HTML jQuery submit returns Latitude and Longitude

I have an HTML form that I want to be able to fill out, then submit, then have latitude and longitude appear on submit. It seems to be working but lat and long only appear for a split second.

Here is my code:

<div class="container" ng-controller="TestCtrl">
<h2>Test Form</h2>
<form id="address" method="post">
<div class="form-group">
<label for="inputText1">Street</label>
<input type="text" class="form-control" id="street_name" placeholder="Street" ng-model="street" name="street_address">
<div class="form-group">
<label for="inputText2">House Number</label>
<input type="text" class="form-control" id="street_number" placeholder="House Number" ng-model="housenumber" name="house_number">
<div class="form-group">
<label for="inputText3">Postal Code</label>
<input type="text" class="form-control" id="postal_code" placeholder="Postal Code" ng-model="postalcode" name="postal_code">
<div class="form-group">
<label for="inputText4">City</label>
<input type="text" class="form-control" id="city" placeholder="City" ng-model="city" name="city">
<button id="sub" type="submit" class="btn btn-default">SAVE</button>
<label for="id_lat">Latitude</label><input type="text" name="lat" value="0.000000" id="id_lat" />
<label for="id_lng">Longitude</label><input type="text" name="lng" value="0.000000" id="id_lng" />

<script type="text/javascript">
$(document).ready(function() {
var geocoder;
var address;
$('#address').submit(function() {
geocoder = new google.maps.Geocoder();
address = $('#street_name').val() + " " + $('street_number').val() + " " + $('#postal_code').val() + ", " + $('#city').val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
} else {
return false;


They only appear briefly because you are doing:


This will cause the form to submit by browser default process and page will reload.

It's not clear what your intentions are for doing this