使用javascript访问input元素

时间:2015-04-10 10:40:26

标签: javascript html5 perl google-maps-api-3 geocoding

我对Javascript没有经验,所以任何帮助都会非常受欢迎。对你们这个人来说应该很容易。我发布了很多代码,但我的问题只是将3个输入字段值复制到字符串/变量中并用它进行地理编码。

我在表格中输入了这些内容:

<table width="580px" cellpadding="0" cellspacing="0">
<tr>
<td width="290"><label for="street">Street:</label></td>
<td width="278"><INPUT type="text" name="obj_object_description_street" id="obj_object_description_street" class="inputField" autocomplete="off" /></td>
<td width="12"></td>
</tr>
<tr>
<td width="290"><label for="streetno">House number:</label></td>
<td width="290"><INPUT type="text" name="obj_object_description_streetno" id="obj_object_description_streetno" class="inputField" autocomplete="off" /></td>
<td width="12">&nbsp;</td>
</tr>

<tr>
<td width="290"><label for="zipcode">Post number:* </label></td>
<td width="290"><INPUT type="text" name="obj_object_description_zipcode" id="obj_object_description_zipcode" class="inputField" autocomplete="off" /><INPUT TYPE="hidden" name="sys_area_node_id" /></td>
<td width="12"><img src="/img/info.gif" alt="info" width="12" height="11" border="0" onclick="show_info(this,8);" onmouseover="make_pointer();" onmouseout="del_pointer();" /></td>
</tr>

此代码显示带有可拖动图钉的Google地图:

<script type="text/javascript">

 var geox='<%obj_object_description_geox%>';  //Location from DB
 var geoy='<%obj_object_description_geoy%>';  //Location from DB
 var sgeox='<%sys_area_geox%>';
 var sgeoy='<%sys_area_geoy%>';
 var telefon = "<%adv_advertiser_phone%>";
 var slika = "<%main_media_web_url%>";
 var povrsina = "<%area%>";
 var cijena = "<%price_str%>";
 var naslov = '<%headline%>';
 var posta = "<%obj_object_description_zipcode%>";
 var ulica = "<%obj_object_description_street%>";
 var broj =  "<%obj_object_description_streetno%>"; 
 var address = "";


function initialize_map(){
  if(geox != 0 && geoy != 0) //we have gps
  { 
    var myLatlng = new google.maps.LatLng(geox, geoy);  
    show_map(myLatlng);
  }
  else if(sgeox!=0 && sgeoy !=0)
  {
     var myLatlng = new google.maps.LatLng(sgeox, sgeoy);
     show_map(myLatlng);
  }
  else //no? we do the old good geocoding
  {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': '<%bc_sys_area_name%>, <%bc_sys_area_name_2%>'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

           show_map(results[0].geometry.location);
    } else {
            alert('Geocode was not successful for the following reason: ' + status);
     }
    });


  } 
}



</script>

我的问题是:

 var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': '<%bc_sys_area_name%>, <%bc_sys_area_name_2%>'}, function(results, status) 

我不想进行地理编码&lt;%bc_sys_area_name%&gt;,&lt;%bc_sys_area_name_2%&gt;来自数据库。我想用输入的组合数据(街道+门牌号+门票号)进行地理编码。 街上有名字&amp; id obj_object_description_street 众议院有名称&amp; id obj_object_description_streetno 邮政编号有名称&amp; id obj_object_description_zipcode。

我已经创建了一个将所有这3个值组合在一起的函数: 更新: 我的问题是我使用此功能在输入中复制3个输入,其中id =&#34; geocomplete&#34;我需要这个函数将这个值onload(当页面打开/刷新时)复制到输入,而不仅仅是当我输入(keyup事件)时。

 <script type="text/javascript">

$('#obj_object_description_street, #obj_object_description_streetno, #obj_object_description_zipcode').bind('keypress blur', function() {

    $('#geocomplete').val($('#obj_object_description_street').val() + ' ' +
                             $('#obj_object_description_streetno').val() + ' ' +
                             $('#obj_object_description_zipcode').val() );

});


    </script>

但我不知道如何将所有这3个数据放入字符串/变量并将其放入

geocoder.geocode( {'address': 'HERE IT SHOULD BE'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

1 个答案:

答案 0 :(得分:0)

感谢您的更新。我根据您的反馈更新了我的答案。我建议使用jquery ready函数。我在这里创建了一个例子,但你可能需要调整一下。基本上,我创建了两个函数,当页面加载和按键事件发生时,我会在不同的时间调用它们。

 $(function() {
   $('#obj_object_description_street, #obj_object_description_streetno, #obj_object_description_zipcode').bind('keypress blur', function() {
     $('#geocomplete').val(geoComplete());
     updateGeoCoder(); //do this if you want to make a geocode call everytime you have this event 
   });

   function geoComplete() {
    return $('#obj_object_description_street').val()   + ' ' +
           $('#obj_object_description_streetno').val() + ' ' +
            $('#obj_object_description_zipcode').val() ;
   }

   function updateGeoCoder() {
     var geocoder = new google.maps.Geocoder();
     var geoCompleteVal = $('#geocomplete').val();
     geocoder.geocode( {'address': geoCompleteVal}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         show_map(results[0].geometry.location);
       } else {
          alert('Geocode was not successful for the following reason: '+ status);
       }
     });
   }

   //this is to run as soon as the page loads/refresh
   $('#geocomplete').val(geoComplete());
   updateGeoCoder();
 });