Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2016, 18:40
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Нужно добавить еще одно поле <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 полей отобразятся на странице, кнопка добавить поле исчезла, и возле каждего поля
была кнопка удалить это поле!
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2016, 19:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sergofedor06,
Генерация и удаление
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2016, 19:01
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

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




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




при нажатии на красную кнопку напротив поля, это поле удаляется!
Ответить с цитированием
  #4 (permalink)  
Старый 15.09.2016, 19:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sergofedor06,
начните, в чём проблема?
Ответить с цитированием
  #5 (permalink)  
Старый 15.09.2016, 19:08
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Сообщение от рони Посмотреть сообщение
sergofedor06,
Генерация и удаление

спасибо! похоже на то, а как сделать ограничение, чтобы мог добавлять 5 полей?
Ответить с цитированием
  #6 (permalink)  
Старый 15.09.2016, 19:09
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

в примере, сколько не нажму столько полей и выводит на странице
Ответить с цитированием
  #7 (permalink)  
Старый 15.09.2016, 19:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

добавление и удаление 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>

Последний раз редактировалось рони, 15.09.2016 в 19:54.
Ответить с цитированием
  #8 (permalink)  
Старый 15.09.2016, 21:30
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

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

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

<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 полей присутствовали физически, а ява скрипт просто открывал скрытое поле при нажатии на Добавить поле
тогда думаю проблема исчезнет.
Ответить с цитированием
  #9 (permalink)  
Старый 15.09.2016, 21:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от sergofedor06
выпадает новое поле, но в нем не работает выпадающий поиск от гугла, поиск от гугл работает только в пермом поле
не осилил
Ответить с цитированием
  #10 (permalink)  
Старый 15.09.2016, 21:44
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Сообщение от рони Посмотреть сообщение
не осилил
в смысле не осилил?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно при вводе в текстовое поле тут же отобразить данный в другом месте klubnichkaaa AJAX и COMET 3 20.10.2011 20:46
Обновить одно поле в 10 таблицах в MYSQL Golovastik Ваши сайты и скрипты 4 17.03.2011 12:40
Добавить варианты в поле <inpute type=text> softrix AJAX и COMET 2 06.07.2010 12:07
Нужно добавить блокировку ссылки на время выполнения скрипта aidka Events/DOM/Window 1 02.08.2009 20:11
Добавить поле типа файл на панель (extjs) nechin ExtJS 0 10.06.2009 11:22