javascript variable in hidden formfield...how?

This site is best viewed in a modern browser with JavaScript enabled.

javascript variable in hidden formfield...how?

nimrod_767

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;

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?

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?

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)+" "+standardize(bwords
))
if (standardize(awords) != standardize(bwords)) {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.Point.coordinates;
document.getElementById("message").innerHTML +=
"<br>"+(i+1)+": <a href='javascript:place(" +p[1]+","+p[0]+")'>"+
result.Placemark.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='javascript:place(" +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 
// [url]http://www.commchurch.freeserve.co.uk/[/url] 
// [url]http://econym.googlepages.com/index.htm[/url] 


//]]> 
</script>

nimrod_767

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

document.getElementById("lat").value = p[1];

in the function and

<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.Point.coordinates;
document.getElementById("message").innerHTML += "<br>"+(i+1)+": <a href='javascript:place(" +p[1]+","+p[0]+")'>"+ result.Placemark.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='javascript:place(" +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");
}:confused:

Fang

Why not hard code the form in the document?
What does plog-upload.php receive server side?