쿼리 입력을 만들기 위해 블로우 입력 onBlur

Question

먼저 작은 배경 ... 나는 박물관 표본과 관련된 인쇄 된 레이블에서 웹 양식을 통해 데이터를 수집하는 데이터베이스 프로젝트 작업을하고 있습니다. 양식의 일부에는 국가, 주, 카운티 및 위치와 같은 여러 지역 필드가 포함됩니다. 종종이 표본에는 지리적 좌표 (위도, 경도)가 연결되어 있지 않으므로 소급하여 지리 참조해야합니다. 위에 나열된 양식 필드의 값이 주어진다면 점을 그릴 웹 응용 프로그램에 링크되는 양식의 일부로 아이콘이 있습니다.

그래서 가능한 경우, 내가하고 싶은 것은 데이터 베이징하는 사람에게 양식의 지역 데이터를 입력하도록하는 것입니다. 그들이 지역 필드를 채울 때 javascript onblur 또는 onchange 이벤트는 쿼리 문자열을 생성합니다 (즉,? country = xxx & state = xxx & county = xxx & location = xxx; 여기서 xxx는 onblur 형식에서 가져온 데이터이므로) 매핑 웹 응용 프로그램에 액세스하기 위해 아이콘 링크에 추가 할 수 있습니다. 경우에 따라 표본에 모든 지역 필드에 대한 데이터가 없을 수 있으며, 약간의 복잡함 (??)이 있지만 매핑 앱이이를 처리하도록 제작됩니다.

예 입력 필드 :

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

내가 자바 스크립트에 익숙하지 않아요 내가 비슷한 솔루션에 대한 공정한 조금 주위를 검색 한 이 문제에 관해서는, 그러나 지금까지 나는 비었다.

누군가 도와 드릴 수 있기를 바랍니다.

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 이벤트가 발생한 후 기본 URL을 쿼리로 업데이트합니다. 모두 좋다 ....