www.webdeveloper.com
Results 1 to 3 of 3

Thread: javascript variable in hidden formfield...how?

  1. #1
    Join Date
    May 2009
    Posts
    6

    Question javascript variable in hidden formfield...how?

    Dear all,

    I truly appreciate any help. I'm still new to Javascript and need some guidance in the darkness...:-)

    My challenge is that I need to pass the lng/lat into a PHP-script that
    then saves the info into a DB. The user will also upload a file and
    other text that he/she inputs via text-fields. I would like the latitude
    longitude, the text fields and the file to be send to the PHP-script when
    the user hits the "Submit" button.


    I have been told to use GDownloadUrl for the lng/lat but that
    does not sort out the file-upload problem. I have spend considerable
    time reading on the web regarding this and the only conclusion that I
    have is to send it via old fashion HTML forms. This means that I need
    to pass the lng/lat to hidden form-fields. I have included the code
    below and I have a couple of questions that I would be so glad if
    anyone can help me with;


    1. The total form includes a Google map. The user search for a location.
    Get's a marker. Then choose file to upload and add some text in the
    text fields. Where in the Javascript should I have the hidden
    formfields or should I have them in the javascript or in the <body>-
    part of the site with the other form fields?


    2. When the user hits the Search-button for the map the showAddress()-
    function is called. If I should have the hidden form-fields in the
    Javascript, should I have it there?


    3. Is this syntax correct for the hidden form fields?
    var html ="<form id='uploadForm' action='plog-upload.php'
    method='post' enctype='multipart/form-data'>" +
    "<input type='hidden' name='lat' value='"+p[1]+"' />" +
    "<input type='hidden' name='lng' value='"+p[0]+"' />"

    What else do I need to do to make it work?

    Once again, thank you all skilled people out there!


    //Nimrod


    <script type="text/javascript">
    //<![CDATA[


    if (GBrowserIsCompatible()) {


    var map;
    var geo;
    var reasons=[];


    function load() {
    map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(20,0),2);


    // ====== Create a Client Geocoder ======
    geo = new GClientGeocoder();


    // ====== Array for decoding the failure codes ======
    reasons[G_GEO_SUCCESS] = "Success";
    reasons[G_GEO_MISSING_ADDRESS] = "Missing Address: The
    address was either missing or had no value.";
    reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address: No
    corresponding geographic location could be found for the specified
    address.";
    reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: The
    geocode for the given address cannot be returned due to legal or
    contractual reasons.";
    reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is
    either invalid or does not match the domain for which it was given";
    reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily
    geocoding quota for this site has been exceeded.";
    reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding
    request could not be successfully processed.";
    }


    // ===== list of words to be standardized =====
    var standards = [ ["road","rd"],
    ["street","st"],
    ["avenue","ave"],
    ["av","ave"],
    ["drive","dr"],
    ["saint","st"],
    ["north","n"],
    ["south","s"],
    ["east","e"],
    ["west","w"],
    ["expressway","expy"],
    ["parkway","pkwy"],
    ["terrace","ter"],
    ["turnpike","tpke"],
    ["highway","hwy"],
    ["lane","ln"]
    ];


    // ===== convert words to standard versions =====
    function standardize(a) {
    for (var i=0; i<standards.length; i++) {
    if (a == standards[i][0]) {a = standards[i][1];}
    }
    return a;
    }


    // ===== check if two addresses are sufficiently different =====
    function different(a,b) {
    // only interested in the bit before the first comma in the
    reply
    var c = b.split(",");
    b = c[0];
    // convert to lower case
    a = a.toLowerCase();
    b = b.toLowerCase();
    // remove apostrophies
    a = a.replace(/'/g ,"");
    b = b.replace(/'/g ,"");
    // replace all other punctuation with spaces
    a = a.replace(/\W/g," ");
    b = b.replace(/\W/g," ");
    // replace all multiple spaces with a single space
    a = a.replace(/\s+/g," ");
    b = b.replace(/\s+/g," ");
    // split into words
    awords = a.split(" ");
    bwords = b.split(" ");
    // perform the comparison
    var reply = false;
    for (var i=0; i<bwords.length; i++) {
    //GLog.write (standardize(awords[i])+" "+standardize(bwords
    [i]))
    if (standardize(awords[i]) != standardize(bwords[i])) {reply =
    true}
    }
    //GLog.write(reply);
    return (reply);
    }


    // ====== Plot a marker after positive reponse to "did you mean"
    ======
    function place(lat,lng) {
    var point = new GLatLng(lat,lng);
    map.setCenter(point,14);
    map.addOverlay(new GMarker(point));
    document.getElementById("message").innerHTML = "";
    }


    // ====== Geocoding ======
    function showAddress() {
    var search = document.getElementById("search").value;
    // ====== Perform the Geocoding ======
    geo.getLocations(search, function (result)
    {
    map.clearOverlays();
    if (result.Status.code == G_GEO_SUCCESS) {
    // ===== If there was more than one result, "ask did you
    mean" on them all =====
    if (result.Placemark.length > 1) {
    document.getElementById("message").innerHTML = "Did
    you mean:";
    // Loop through the results
    for (var i=0; i<result.Placemark.length; i++) {
    var p = result.Placemark[i].Point.coordinates;
    document.getElementById("message").innerHTML +=
    "<br>"+(i+1)+": <a href='javascriptlace(" +p[1]+","+p[0]+")'>"+
    result.Placemark[i].address+"<\/a>";
    }
    }
    // ===== If there was a single marker, is the returned
    address significantly different =====
    else {
    document.getElementById("message").innerHTML = "";
    if (different(search, result.Placemark[0].address)) {
    document.getElementById("message").innerHTML = "Did
    you mean: ";
    var p = result.Placemark[0].Point.coordinates;
    document.getElementById("message").innerHTML += "<a
    href='javascriptlace(" +p[1]+","+p[0]+")'>"+ result.Placemark
    [0].address+"<\/a>";
    } else {
    var p = result.Placemark[0].Point.coordinates;
    place(p[1],p[0]);
    document.getElementById("message").innerHTML =
    "Located: "+result.Placemark[0].address;
    var html ="<form id='uploadForm'
    action='plog-upload.php' method='post' enctype='multipart/form-data'>"
    +
    "<input type='hidden' name='lat' value='"+p[1]+"' />" +
    "<input type='hidden' name='lng' value='"+p[0]+"' />"
    }
    }
    }
    // ====== Decode the error status ======
    else {
    var reason="Code "+result.Status.code;
    if (reasons[result.Status.code]) {
    reason = reasons[result.Status.code]
    }
    alert('Could not find "'+search+ '" ' + reason);
    }
    }
    );
    }
    }


    // display a warning if the browser was not compatible
    else {
    alert("Sorry, the Google Maps API is not compatible with this
    browser");
    }


    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://econym.googlepages.com/index.htm


    //]]>
    </script>

  2. #2
    Join Date
    May 2009
    Posts
    6

    Question problem with assigning value to hidden field

    Hi,

    I'm a newbie...just to be frank with that...

    I have function showAddress() and I would like to assign two values from that function into a hidden form field in the same page.

    I'm using

    Code:
    document.getElementById("lat").value = p[1];
    in the function and

    Code:
    <input type="hidden" name="lat" id="lat" value = "" />
    in the HTML-part of the page.

    When the user later submits the form the hidden value should also be tranfered to the php-script.

    Bottom line is that I do not get this to work...anyone got any ideas?

    //Nimrod

    Function:
    function showAddress() {
    var search = document.getElementById("search").value;
    // ====== Perform the Geocoding ======
    geo.getLocations(search, function (result)
    {
    map.clearOverlays();
    if (result.Status.code == G_GEO_SUCCESS) {
    // ===== If there was more than one result, "ask did you mean" on them all =====
    if (result.Placemark.length > 1) {
    document.getElementById("message").innerHTML = "Did you mean:";
    // Loop through the results
    for (var i=0; i<result.Placemark.length; i++) {
    var p = result.Placemark[i].Point.coordinates;
    document.getElementById("message").innerHTML += "<br>"+(i+1)+": <a href='javascriptlace(" +p[1]+","+p[0]+")'>"+ result.Placemark[i].address+"<\/a>";
    document.getElementById("lat").value = p[1];
    document.getElementById("lng").value = p[0];
    }
    }
    // ===== If there was a single marker, is the returned address significantly different =====
    else {
    document.getElementById("message").innerHTML = "";
    if (different(search, result.Placemark[0].address)) {
    document.getElementById("message").innerHTML = "Did you mean: ";
    var p = result.Placemark[0].Point.coordinates;
    document.getElementById("message").innerHTML += "<a href='javascriptlace(" +p[1]+","+p[0]+")'>"+ result.Placemark[0].address+"<\/a>";
    } else {
    var p = result.Placemark[0].Point.coordinates;
    place(p[1],p[0]);
    document.getElementById("message").innerHTML = "Located: "+result.Placemark[0].address;
    document.getElementById("lat").value = p[1];
    document.getElementById("lng").value = p[0];
    }
    }
    }
    // ====== Decode the error status ======
    else {
    var reason="Code "+result.Status.code;
    if (reasons[result.Status.code]) {
    reason = reasons[result.Status.code]
    }
    alert('Could not find "'+search+ '" ' + reason);
    }
    }
    );
    }
    }

    // display a warning if the browser was not compatible
    else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
    }

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Why not hard code the form in the document?
    What does plog-upload.php receive server side?
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles