...

View Full Version : getElementById variable in form submissions



brumpiero
09-29-2008, 06:48 PM
Hello,
I have an html form which submits a user's location to my database via a simple php post.
I have a GMap control on the page too which shows the "lat" & "lng" co-ordinates of their location on the page.
Does anyone know how I get the variable values document.getElementById("lat") and ("lng") to be coded up as form values so they can be submitted with the rest of the data?

I'm so close to having geocoding on my site, please help. I've put the relevant bits of code below. Can supply it all if needed but I am trying to keep this as short as possible. Here is the javascript:

function showAddress(address) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
map.clearOverlays()
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);

GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
});

GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);

GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
});

});

}
}
);
}
}
And here is part of the form:
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="" />
<input type="submit" value="Search!" />
</p>
<p>
<div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>
</form>
<FORM ACTION="formindb.php" METHOD="POST" NAME="contact_form">
<TABLE>
<TR>
<TD width="100"><b>Latitude</b></td>
<TD id="lat" name="lat"></td>
</tr>
<TR>
<TD width="100"><b>Longitude</b></td>
<TD id="lng" name="lng"></td>
</TR>
<TR>
<TD><input type="submit" value="Submit" name="Submit"></TD>
<TD><input type="reset" value="Reset" name="Reset"></TD>
</TR>
</TABLE>
</FORM>

Basscyst
09-29-2008, 09:28 PM
Create two hidden form fields to hold the values of the lat and lng, then set those values in script on form submit.

Something like,


document.getElementById('frm_lng).value=document.getElementById('lng').innerHTML;

brumpiero
09-30-2008, 10:43 AM
That worked perfectly. I knew there had to be an easy way to do it.

Thanks for your quick reply.

Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum