Добавление поля ввода в HTML

Question

Привет Im в настоящее время с помощью этого кода

<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 из местоположения. Эта часть работает хорошо, но я хочу иметь возможность добавлять дополнительные идентичные поля ввода после нажатия кнопки добавления местоположения. Cant выяснить, как их добавить (какие параметры передать, чтобы добавить). Имеете некоторые базовые знания, но не слишком хорошо знакомы с HTML и Javascript, любая помощь приветствуется

Answer 1

Вы можете поместить свои идентификаторы ввода в 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, что мы будем клонировать, то добавление в форму, но перед мы изменим (увеличиваем) идентификатор клонированного списка.

$('#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");; 

}) 

Вы также должны изменить также увеличиваете все идентификаторы, как и для города, cityLat и cityLng таких же, как я сделал для глобального списка.

Здесь работает JSfiddle

Answer 2

Первое, что я замечаю, это то, что вы не используете document.getElementById ('addLocation'), которые (исправьте меня, если я неправильно) требуется без некоторых скриптов.

Следующая вещь: здесь вы используете методы JQuery. У вас есть jquery?

Возможно, это может быть ваша проблема.

Если он включен, убедитесь, что он находится на линии перед вашим скриптом.

Надеюсь, это поможет!