在HTML中添加输入字段

Adding input fields in HTML

本文关键字：输入 字段 添加 HTML      更新时间：2023-09-26

你好，我正在使用这个代码

<div id="inputList">
  <script type="text/javascript">
    function initialize() {
      var input = document.getElementById('inputList').getElementsByClassName("searchTextField")[0];
      var autocomplete = new google.maps.places.Autocomplete(input);
      google.maps.event.addListener(autocomplete, 'place_changed', function () {
          var place = autocomplete.getPlace();
          document.getElementById('city1').value = place.name;
          document.getElementById('cityLat1').value = place.geometry.location.lat();
          document.getElementById('cityLng1').value = place.geometry.location.lng();
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
  <input class="city" id="city1" name="city1" />
  <input class="cityLat" id="cityLat1" name="cityLat" />
  <input class="cityLng" id="cityLng1" name="cityLng" />

 <!--  What to put here?
 <script type="text/javascript">
     ('#addLocation').click(function() {
         ('#inputList').append('??');
     });​
 </script> 
 -->

 <br>
 <input type="button" value="Add New Location" id="addLocation" />
</div>

使用google自动补全填充一个位置的Lat/Lng字段。这部分工作得很好，但我希望能够添加额外的，相同的输入字段按下添加位置按钮后。不知道如何添加它们(传递哪些参数来追加)。有一定的基础知识，但不太熟悉HTML和Javascript，任何帮助是感激

你可以把你的inputItems在一个div，然后使用jquery clone()函数复制它们。下面是HTML:

<form id="dataForm">
    <input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
    <div id="listFields1">
        <input class="city" id="city1" name="city1" />
        <input class="cityLat" id="cityLat1" name="cityLat" />
        <input class="cityLng" id="cityLng1" name="cityLng" />
    </div>
</form>
<input type="button" value="Add New Location" id="addLocation" />

正如你所看到的，我把所有的表单，然后我把你的输入在一个div我叫listFields1，我们将克隆然后追加到您的表单，但之前我们将改变(增量)克隆列表id。

$('#addLocation').click(function() {
    // get the last cloned list"
    var list = $('div[id^="listFields"]:last');
    // add 1 to the last number we have on the last listField id
    var num = parseInt( list.prop("id").match(/'d+/g), 10 ) +1;
    // clone the new list to the form
    var newList = list.clone().prop('id', 'listFields'+num ).appendTo( "#dataForm" );;
})

你也必须改变和增加你所有的id，如城市，城市和城市的相同，我做了全局列表

这里工作的jsfield

我注意到的第一件事是你没有使用document.getElementById('addLocation')，这(纠正我，如果我错了)是需要没有一些脚本。

下一件事是你在这里使用JQuery方法。是否包含jquery ?

这可能是你的问题。

如果包含，请确保它位于脚本的前一行。

希望这对你有帮助!

相关文章：