Question

首先是一点背景......我正在研究一个数据库项目，该项目通过网络表格从与博物馆标本相关的印刷标签中收集数据。表单的一部分包括多个“位置”字段，例如国家/地区，州，县和位置。通常，这些标本没有与之相关的地理坐标（纬度，经度），因此需要回顾性地进行地理参考。我有一个图标作为表单的一部分，链接到一个Web应用程序，如果给出上面列出的表单字段中的值，将绘制一个点。

所以，如果可能的话，我想做的是让数据库的人输入表单中的位置数据。当他们填写地点字段时，javascript onblur或onchange事件将构建一个查询字符串（即，country = xxx＆amp; state = xxx＆amp; county = xxx＆amp; location = xxx;其中xxx是从表单onblur中获取的数据）所以它可以附加到图标链接，以访问映射Web应用程序。在某些情况下，标本可能没有所有位置字段的数据，这可能会使事情变得复杂（??），但是映射应用程序是为处理此问题而构建的。

示例输入字段：

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

图标+链接：

    <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>

我对javascript并不是很熟悉，而且我已经搜索了一个类似于这个问题的解决方案，但到目前为止，我已经空了。

我希望有人可以提供帮助。

Answer 1

好的，经过几个小时的修修补补后，我想我已经把它弄出来了。

我提出的脚本出现在标题中：

    <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>

表单上的示例输入字段：

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

基于表单字段条目更新的图片链接：

    <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>

在onblur事件触发后，这会使用querysting更新基本URL。一切都很好......

抓取表单输入onBlur以创建查询字符串

1 个答案: