Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    getElementById variable in form submissions

    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>

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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,
    Code:
    document.getElementById('frm_lng).value=document.getElementById('lng').innerHTML;
    Helping to build a bigger box. - Adam Matthews

  • Users who have thanked Basscyst for this post:

    brumpiero (09-30-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks Basscyst

    That worked perfectly. I knew there had to be an easy way to do it.

    Thanks for your quick reply.

    Cheers


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •