Grab form input onBlur to create a querystring

Question

First a little background... I'm working on a database project that gathers its data via a web form from printed labels associated with museum specimens. Part of the form includes several Locality fields, such as country, state, county, and location. Often, these specimens do not have geographic coordinates (Latitude, Longitude) associated with them, so they need to be retrospectively geo-referenced. I have an icon as part of the form which links to a web application that will plot a point if given the values from the form fields listed above.

So, if possible, what I would like to do is have the person that is databasing input the locality data in the form. As they fill out the locality fields, a javascript onblur or onchange event would build a querystring (i.e., ?country=xxx&state=xxx&county=xxx&location=xxx; where xxx is the data grabbed from the form onblur) so that it can be appended to the icon link in order to access the mapping web app. In some cases, specimens might not have data for all locality fields, which might complicate things a bit (??), but the mapping app is built to handle this.

Example Input Field:

    <input name="country" placeholder="Country" onblur="if(this.value != '') { SOME CODE HERE??;}" required="required" type="text"/>

The Icon + Link:

    <a href="http://www.museum.tulane.edu/geolocate/web/WebGeoref.aspx?country=xxx&state=xxx&county=xxx&locality=xxx" class="lytebox" data-title="Find Lat/Long" data-lyte-options="width:1000px height:800px scrollbars:no"><img title="Click to georeference location using GEOLocate." alt="" height="16" src="images/world.png" width="16" class="auto-style5"></a>

I'm not very familiar with javascript and I've searched around a fair bit for a solution that is similar to this problem, but so far I have come up empty.

I hope someone can help.

Answer 1

Ok, after a few hours of tinkering around, I think I figured this one out.

The script I came up with goes in the header:

    <script type="text/javascript">
    function check_onblur() {
         var country = document.getElementById('country').value;
         var state = document.getElementById('state').value;
         var county = document.getElementById('county').value;
         var locality = document.getElementById('locality').value;

         document.getElementById('geolink').href = "http://www.museum.tulane.edu/geolocate/web/
           WebGeoref.aspx?country=" + country + "&state=" + state + "&county=" + county 
           + "&locality=" + locality;
    }
    </script>

Example input field on form:

    <input id="country" tabindex="14" name="country" placeholder="Country"
       onblur="check_onblur();" required="required" type="text"/>

Image Link that updates based on form field entries:

    <a id="geolink" href="http://www.museum.tulane.edu/geolocate/web/WebGeoref.aspx"
    class="lytebox" data-title="Get Latitude/Longitude from Locality Data" data-lyte-
    options="width:1000px height:780px scrollbars:no"><img title="Click to georeference
    location using GEOLocate." alt="" height="16" src="images/world.png" width="16"
    class="auto-style5"></a>

This updates the base URL with the querysting after an onblur event fires. All is good....