Geocoding Data From Form

[darrin365]

I have a PHP form that writes data to a database. I want to pull unsubmitted user entries from four fields, run it through Google's geocoder (via JavaScript) and then return the results back to two of the form fields. JavaScript seems like it would be the best tool as the geocoding is in JS and the results are in JSON. Is this possible and how in the world would I do this?

I have already added a new submit button to the form below the address fields. I also already have the script for the geocoder. It's basically pulling the data into the geocode script and returning the coordinates from the results to the form fields that I'm having problems with. I've searched and searched for days to no avail.

Thanks for your time!

[artacus]

I'm not understanding exactly where its breaking down on you. You SHOULD fire off an ajax request as soon as the field has been changed (rather than waiting for all four in an onsubmit).

Another approach would be to offload this later to another PHP script. The benefits of that are 1) that the user doesn't notice any latency while goecoding info is retreived and 2) If you've already looked up an address, you don't need to do it again when someone else from the same address registers.

[darrin365]

Thanks for the reply, Articus.

All four fields are required for geocoding, so I would need to wait for all four to be completed anyway. I'm just not sure of the JavaScripting necessary to pull the data from the four fields. I've searched and can't find much help. At the risk of looking like a complete idiot, the closes thing I could find involved somthing like this:
[code]var address.address = page_addListing.adminForm.address.value;
var address.city = page_addListing.adminForm.city.value;
var address.state = page_addListing.adminForm.state.value;
var address.postcode = page_addListing.adminForm.postcode.value;
var address = (address.address + address.city + address.state + address.postcode); [/code]

Then running "address" through the geocoder. But that's not working. I'm guessing my syntax is way off. Also, should I create this as a separate JS file and link to it on the PHP page, or should I put the whole script in that PHP page?

(I hope this is making some sense. I'm getting a bit out of my league here.)

Darrin

[artacus]

Use ID tags on your form elements
<input type='text' name='address' id='address'>
then you can reference them using getElementById:
[code]
function doGeoCode() {
var myAddr = document.getElementById('address').value;
var myCity = document.getElementById('city').value;
...
if(myZip.length == 0 && (myCity.length() == 0 || myState.length < 2)){
    alert('You must either enter a zip code or City and State');
    return false;
} else {
    myAddress = myAddr + '+' + myCity + '+' + myState + '+' + myZip;
    do your goecoding here...
}[/code]

[darrin365]

Thanks, Artacus. That looks fantastic. I think I'm really close.

The browser didn't like the () after city.length. It said city.length was not a function. So I took out the braces. Now it's prompting me for a City, St or Zip, even though I have those in the fields.

Ideas?

Darrin

[artacus]

Oh no ()'s that was a typo.
Did you add the variables for State and Zip? I left that for you to fill in.

[darrin365]

Javol!

Here is what I have:
[code]var geocoder = null;
var geocoder = new GClientGeocoder();

// Get Form Values
var myAddr = document.getElementById('address').value;
var myCity = document.getElementById('city').value;
var myState = document.getElementById('state').value;
var myZip = document.getElementById('postcode').value;

function doGeoCode() {

if(myZip.length == 0 && (myCity.length == 0 || myState.length < 2)){
    alert('You must either enter a zip code or City and State');
    return false
} else {
    myAddress = myAddr + '+' + myCity + '+' + myState + '+' + myZip;
   
    geocoder.getLatLng (
    myAddress,
    function (point) {
  if (!point) {
  alert(address + " not found");
  } else {
  adminForm.cust_3.value = point.lat();
  adminForm.cust_4.value = point.lng(); 
  }
}
);
  }
} [/code]

Then on my PHP page I link to the JS file below the onclick=action that activates it.

[darrin365]

Never mind. Got it. I had to replace "document" with the document name before the getElementById.

Thanks for all of your help!

[darrin365]

OK. Hopefully this is the last thing. I'm still not getting the coordinates inserted into the form fields. I'm also getting a myZip has not properties error code.

Do I have this wrong?
[code]  page_addListing.adminForm.cust_3.latitude.value = point.lat();
            page_addListing.adminForm.cust_4..longitude.value = point.lng();[/code]

Do I need to define an ID or something for cust_3 and cust_4 before running the script?

[artacus]

You shouldn't have to replace document with document name.
You should have something like:
[code]
--html
<input type="hidden" name="lat" id="myLat" />
<input type="hidden" name="long" id="myLong" />

--in doGeocode()
document.getElementById('myLat').value = point.lat();
document.getElementById('myLong').value = point.lng();[/code]

[darrin365]

OK, I changed it back to "document" on the "vars" at the top, instead of the document name. I also changed it on the point.lat and point.lng statements at the bottom. But I'm back to getting a "You must enter a zip code or City and State" error message on running the script. Not sure why it's not finding the data.

Here's my full script:
[code]var geocoder = null;
var geocoder = new GClientGeocoder();

// Get Form Values
var myAddr = document.getElementById('address').value;
var myCity = document.getElementById('city').value;
var myState = document.getElementById('state').value;
var myZip = document.getElementById('postcode').value;


function doGeoCode() {

if(myZip.length == 0 && (myCity.length == 0 || myState.length < 2)){
    alert('You must either enter a zip code or City and State');
    return false
} else {
    myAddress = myAddr + '+' + myCity + '+' + myState + '+' + myZip;
   
    geocoder.getLatLng (
    myAddress,
    function (point) {
  if (!point) {
  alert(address + " not found");
  } else {
  document.getElementById('cust_3').value = point.lat();
  document.getElementById('cust_4').value = point.lng(); 
  }
}
);
  }
}  [/code]

Ideas?

(BTW, thanks again for your time on this.)

Darrin

[darrin365]

I've also tried moving the script directly onto the document page instead of linking to it. No luck. Still get the prompt that I need to enter a zip code or City & State, even though I already have. Javascript console returns no errors.

Anyone have any suggestions?

Thanks,
Darrin

[darrin365]

I've changed the if statement to read:
[code]if (myZip || (myCity && myState.length < 2))[/code].
Now it accepts the script, but returns the alert "+++ not found"

[artacus]

Its obviously not getting the values from your form fields. Thats what you need to fix.