使用 javascript 访问输入元素

Question

我没有使用 Javascript 的经验，因此非常感谢任何帮助。对于你们来说，这应该很容易。我发布了很多代码，但我的问题只是将 3 个输入字段值复制到 string/variable 并将其用于地理编码。

我在 table 中有这个输入：

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

我不想从数据库中对 <%bc_sys_area_name%>、<%bc_sys_area_name_2%> 进行地理编码。我想使用输入的组合数据（街道 + 门牌号 + Post 号）进行地理编码。街道有名称和 ID obj_object_description_street 房屋有名称和 ID obj_object_description_street否 Post 号码有名称和 ID obj_object_description_zipcode。

我制作了一个函数，将所有这 3 个值放在一起：更新：我的问题是我使用此函数在 id="geocomplete" 的输入中复制 3 个输入，我需要此函数将此值 onload（当页面 opens/refreshes 时）复制到输入，而不仅仅是当我类型（按键事件）。

 <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 个数据放入一个 string/variable 并放入

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

Answer 1

感谢更新。我已经根据您的反馈更新了我的答案。我建议使用 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();
 });

使用 javascript 访问输入元素

Accesing input element with javascript

html

javascript

perl

geocoding

google-maps-api-3