Javascript-форум - Нужно добавить еще одно поле <input>

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Нужно добавить еще одно поле <input> (https://javascript.ru/forum/css-html/64948-nuzhno-dobavit-eshhe-odno-pole-input.html)

sergofedor06

15.09.2016 18:40

Нужно добавить еще одно поле <input>

Есть такой код с 5-текстовыми поля input
нужно сделать чтобы при нажатии на кнопку добавить, добавляло
на страницу одно поле input
вот код моих полей они все отображаются, а нужно чтобы отображалось изначально только одно поле, а потом если
посетителю нужно добавить поле он жмет добавить, или если нужно удаляет уже добавленное поле!

<div class="half-block db">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<span class="waypoint-add"><img src="plus.png" alt=""></span>
</div>

<div class="hidden">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<a href="javascript:void(0);" class="waypoint-remove"><img src="minus.png" width="37"></a>
</div>

<div class="hidden">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<a href="javascript:void(0);" class="waypoint-remove"><img src="minus.png" width="37"></a>
</div>

<div class="hidden">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<a href="javascript:void(0);" class="waypoint-remove"><img src="minus.png" width="37"></a>
</div>

<div class="hidden">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<a href="javascript:void(0);" class="waypoint-remove"><img src="minus.png" width="37"></a>
</div>

тут всего 5 полей input, нужно чтобы когда все 5 полей отобразятся на странице, кнопка добавить поле исчезла, и возле каждего поля
была кнопка удалить это поле!

рони	15.09.2016 19:00

sergofedor06,
http://javascript.ru/forum/dom-windo...tml#post281727

sergofedor06

15.09.2016 19:01

вот картинки как нужно чтобы работало
в данном примере
открыто 4 поля из 5 возможных

в этом примере открыты все 5 полей и как видно исчезла красная кнопка которая добавляет поле, так как можно только 5 полей добавить

при нажатии на красную кнопку напротив поля, это поле удаляется!

рони	15.09.2016 19:07

sergofedor06,
начните, в чём проблема?

sergofedor06

15.09.2016 19:08

Цитата:

Сообщение от рони (Сообщение 428791)

sergofedor06,
http://javascript.ru/forum/dom-windo...tml#post281727

спасибо! похоже на то, а как сделать ограничение, чтобы мог добавлять 5 полей?

sergofedor06

15.09.2016 19:09

в примере, сколько не нажму столько полей и выводит на странице

рони	15.09.2016 19:26

добавление и удаление input

sergofedor06,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    #ss, .del_variant{
      cursor: pointer;
    }
   .control-group:nth-child(1) .del_variant{
     display: none;
   }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document)
        .ready(function () {
            var variant = $('.control-group')
                .clone(true);
            $('#ss')
                .click(function () {

                    $(variant)
                        .clone(true)
                        .appendTo('#variants')
                        .fadeIn('slow')
                        .find("input[name*=name]")
                        .focus();
                   if($('.control-group').length == 5) $(this).hide();
                });
            $(document)
                .on('click', 'a.del_variant', function () {
                    $(this)
                        .parents(".control-group")
                        .remove();
                    if($('.control-group').length < 5) $('#ss').show();
                });
        });
    </script>
</head>

<body>
    <div id="variants">
        <div class="control-group" >
            <label class="control-label">Username</label>
            <div class="controls">
                <input type="text" placeholder="Username" name="name[]"> <a class="del_variant">X</a>
            </div>
        </div>
    </div><span id="ss">Добавить вариант</span>
</body>

</html>

sergofedor06

15.09.2016 21:30

РОНИ
Спасибо вам за труд!

но в моем варианте если я делаю хтмл код так

<div id="variants">
<div class="control-group" >
<div class="controls">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from"> <a class="del_variant">X</a>
</div>
</div>
</div><span id="ss">Добавить поле</span>

то при нажатии на Добавить поле
выпадает новое поле, но в нем не работает выпадающий поиск от гугла, поиск от гугл работает только в пермом поле
а в остальных полях что генерирует ваш скрипт выпадающий поиск почему-то не работает у меня

хотя если если код вида

<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">

то поиск от гугл будет у меня работать во всех 5 полях, а не только в первом верхнем как в вашем варианте,
как вы видите оформление идентичное, может проблема в том что нужно чтобы все пять полей физически присутствовали на странице - скорее всего, вы можете помочь прикрутить в таком варианте ваш скрипт, чтобы
все 5 полей присутствовали физически, а ява скрипт просто открывал скрытое поле при нажатии на Добавить поле
тогда думаю проблема исчезнет.

рони	15.09.2016 21:40

Цитата:

Сообщение от sergofedor06

выпадает новое поле, но в нем не работает выпадающий поиск от гугла, поиск от гугл работает только в пермом поле

не осилил

sergofedor06

15.09.2016 21:44

Цитата:

Сообщение от рони (Сообщение 428807)

не осилил

в смысле не осилил?

рони	15.09.2016 21:52

sergofedor06,
более ничем помочь не могу

sergofedor06

15.09.2016 21:59

ок, спасибо и на этом

sergofedor06

15.09.2016 23:13

вот нашел тоже вариант похожий на то что дал РОНИ

но к сожалению в нем тоже не работает выпадающий поиск от гугла, работает только в верхнем поле, теперь понятно необходимо чтобы все 5 полей физически были в коде страницы, любая генерация яваскриптом генерирует новые поля но поиск тогда не работает, а вообще кому нужно просто ради полей то подойдет!

<script type="text/javascript">
var vcountOfFields = 1; // Текущее число полей
var vcurFieldNameId = 1; // Уникальное значение для атрибута name
var vmaxFieldLimit = 5; // Максимальное число возможных полей
function vdeleteField(a) {
 // Получаем доступ к ДИВу, содержащему поле
 var contDiv = a.parentNode;
 // Удаляем этот ДИВ из DOM-дерева
 contDiv.parentNode.removeChild(contDiv);
 // Уменьшаем значение текущего числа полей
 vcountOfFields--;
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}
function addField() {
 // Проверяем, не достигло ли число полей максимума
 if (vcountOfFields >= vmaxFieldLimit) {
 alert("Число полей достигло своего максимума = " + vmaxFieldLimit);
 return false;
 }
 // Увеличиваем текущее значение числа полей
 vcountOfFields++;
 // Создаем элемент ДИВ
 var div = document.createElement("div");
 // Добавляем HTML-контент с пом. свойства innerHTML
 div.innerHTML = "<input name=\"ways[]\" type=\"text\" placeholder=\"Через\" class=\"waypoint-city city-from\"> <a onclick=\"return vdeleteField(this)\" href=\"#\">[X]</a>";
 // Добавляем новый узел в конец списка полей
 document.getElementById("vparentId").appendChild(div);
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}
</script>


<div id="vparentId">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<a onclick="return addField()" href="#">Добавить поле</a>
</div>

может кто мне поможет сделать тот же самый функционал но нужно чтобы все 5 полей были на странице физически, а нажимая на ссылку
Добавить поле
просто отображало это скрытое поле и крестик напротив него если нужно удалить поле.

рони	15.09.2016 23:34

Цитата:

Сообщение от sergofedor06

но к сожалению в нем тоже не работает выпадающий поиск от гугла

вы не могли обьяснить, что это такое?

laimas

16.09.2016 00:01

Цитата:

Сообщение от sergofedor06

// Создаем элемент ДИВ
var div = document.createElement("div");
// Добавляем HTML-контент с пом. свойства innerHTML
div.innerHTML = "<input name=\"ways[]\" type=\"text\" placeholder=\"Через\" class=\"waypoint-city city-from\"> <a onclick=\"return vdeleteField(this)\" href=\"#\">[X]</a>";
// Добавляем новый узел в конец списка полей

<form id="as">
<div class="half-block">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from" onkeyup="alert(1)">
<span class="waypoint-add"><img src="plus.png" alt=""></span>
</div>
</form>

<button onclick="AddItem()">Добавить</button>

<script> 
function AddItem() {
    var f = document.querySelector("#as"), a = f.querySelector("div:first-child").cloneNode(true);
    a.querySelector("input").value = ""; //etc
    f.appendChild(a)
}
</script>

sergofedor06

16.09.2016 00:28

РОНИ

попробую объяснить, если на странице разместить
все 5 полей инпут

<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">

то при вводе в любое из 5 полей слова у меня происходит выпадающий поиск! по любому из 5 полей, это при условии что все поля как я показал выше физически присутствуют в коде страницы, то поиск тогда работает во всех полях!

а вот если идет генерация нового поля при помощи JS
то в этом случае физически в коде присутствует только одно поле
хоть визуально на странице я открыл новых 5 полей, и получается что поиск от гугл работает только в одном из 5 полей.

Так что мне нужен какой-то вариант

когда в коде уже будет лежать эти 5 зкрытых полей, а скрипт будет просто открывать добавлять новое поле т.е. открывать скрытое поле, вот в таком случае все будет гуд

sergofedor06

16.09.2016 00:32

нужно что-бы одно поле отображалось в браузере, а остальные 4 поля были в css хиден не отображались на странице, при нажатии на
Добавить поле
открывалось это скрытое поле и напротив него был (х) если нужно человек мог его закрыть.
Вроде все.
Спасибо.

sergofedor06

17.09.2016 00:07

Господа!
подскажите как мне сделать чтобы когда
я нажимаю на ссылку Добавить еще поля
поля показались все это работает норм, нужно сделать чтобы сама ссылка Добавить еще поля
исчезла после того как по ней кликнул и открылись дополнительные поля!

<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; }
</style>


<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
</script>


<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<div class="spoiler_links">Добавить еще поля</div>
<div class="spoiler_body">
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<br>
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<br>
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
<br>
<input name="ways[]" type="text" placeholder="Через" class="waypoint-city city-from">
</div>

sergofedor06

17.09.2016 00:09

нужно чтобы после клика по ссылке отобразилось 5 инпут полей, а самой ссылки не видно стало.

рони	17.09.2016 00:13

sergofedor06,
$(this).hide().next

sergofedor06

17.09.2016 00:31

Спасибо РОНИ
выручили меня

$(this).hide().next('.spoiler_body').toggle('normal');

Часовой пояс GMT +3, время: 19:17.