Hi I am currently using GoogleMaps API v3 and I am trying to get the variables for the latitude and longitude and place them in a hidden form as html variables and pass them through a form to a php page. The latitude and longitude are printing out on my page as the span but I cant get them to print in the form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<!-- google maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jquery UI -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- our javascript -->
<script type="text/javascript" src="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="style4.css" />
</head>
<body>
<input id='gmaps-input-address' type='text'/>
<div id='gmaps-error'></div>
<div id='gmaps-canvas'></div>
<br/>
<br/>
Latitude: <span id='gmaps-output-latitude'></span>
<br/>
Longitude: <span id='gmaps-output-longitude'></span>
<br/>
<script type="text/javascript">
function doSomething()
{
var lat = document.getElementById('#gmaps-output-latitude');
lat_element.value = google_maps_api_variable;
var lon = document.getElementById('#gmaps-output-longitude');
lon_element.value = google_maps_api_variable;
document.getElementById("lat").value=lat;
document.getElementById("lon").value=lon;
}
</script>
<form action="join.php" method="post" onSubmit="doSomething">
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="lon" id="lon"/>
<input type="submit" value="Confirm Address"/>
</form>
</body>
</html>
In the Googlemaps API there is a javascript function which holds the latitude and longitude as follows:
function update_ui( address, latLng ) {
$('#gmaps-input-address').autocomplete("close");
$('#gmaps-input-address').val(address);
$('#gmaps-output-latitude').html(latLng.lat());
$('#gmaps-output-longitude').html(latLng.lng());
}
I am very green with Javascript and would really appreciate any help, I have searched other questions to get as far as I am but I am stuck here.
just add this after the code you already have(to work before the form submits as a click handler of the form submittal buon or something):