Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/8: Рейтинг темы: голосов - 8, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 24.12.2015
Сообщений: 58

Добавление еще одного input

27.03.2018, 20:12. Показов 1734. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Дело в том что есть на форме select с option а в них числа от 1 до 10, при выборе определенного числа, должно добавлятся тоже колличество input, ну и label над ним, ну или проще просто создание div`а а в него я добавлю label input и checkbox с картинкой
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.03.2018, 20:12
Ответы с готовыми решениями:

Зависимость одного input от второго input
Доброго времени всем программистам и кодерам! Я совсем недавно в этом жестком мире скриптов... ( Буду благодарен Вам за помощь! Что...

Добавление пробела в input
Добрый день, подскажите как можно решить данную проблему У меня на сайте есть input=text куда вводится ключ формата "ххххх ххххх...

Нужно добавить еще одно поле <input>
Привет! Есть такой код с 5-текстовыми поля input нужно сделать чтобы при нажатии на кнопку добавить, добавляло на страницу одно поле...

9
 Аватар для atanov
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,674
28.03.2018, 10:19
Владимир5456, примерно так:

HTML5
1
2
3
4
5
6
7
8
9
<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<select>
  <option></option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div></div>
<script src = "23.js" type = "text/javascript"></script>
JavaScript
1
2
3
4
5
6
7
8
9
var selectium = document.getElementsByTagName('select')[0];
var divium = document.getElementsByTagName('div')[0];
var inputQuantity = Number(selectium.value) + 1;
selectium.onchange = function (){console.log(selectium.value +1);
    for (i = 0; i < inputQuantity; i++){
    elementInput = document.createElement('input');
    divium.appendChild (elementInput);  
    }
}
0
0 / 0 / 0
Регистрация: 24.12.2015
Сообщений: 58
28.03.2018, 13:06  [ТС]
Да, работает, только если выбираешь количество допустим 2 он должен добавлять сразу 2, и если выбрать 3 то должен сразу три добавить, и если выбрал 2 а потом опять 1 то он тоже добавляет, а должен удалять
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
28.03.2018, 13:23
Цитата Сообщение от Владимир5456 Посмотреть сообщение
а должен удалять
между строками #4 и #5 javascript-кода, любезно предоставленного здесь выше коллегой atanov, добавьте строку divium.innerHTML = '';
0
0 / 0 / 0
Регистрация: 24.12.2015
Сообщений: 58
28.03.2018, 13:37  [ТС]
Теперь при выборе любого числа из option он только 1 раз добавляет и все, при следующем выборе ничего не происходит, верней он создает input но поверх старого, информация с первого пропадает
0
 Аватар для atanov
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,674
28.03.2018, 13:43
Лучший ответ Сообщение было отмечено Владимир5456 как решение

Решение

Вот так:

HTML5
1
2
3
4
5
6
7
8
<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<select>
  <option></option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<script src = "23.js" type = "text/javascript"></script>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var selectium = document.getElementsByTagName('select')[0];
var divium = document.getElementsByTagName('div')[0];
selectium.onchange = function (){
    var inputQuantity = Number(selectium.value);
    if (divium){divium.remove();}else{}
    divium = document.createElement('div');
    document.body.appendChild (divium);
    for (i = 0; i < inputQuantity; i++){
    elementInput = document.createElement('input');
    divium.appendChild (elementInput);  
    }
}
Добавлено через 1 минуту
kalabuni, предложил вариант лучше
1
0 / 0 / 0
Регистрация: 24.12.2015
Сообщений: 58
28.03.2018, 14:08  [ТС]
Блин, Спасибо большое!!!! Все работает, не знаю что бы без вашей помощи делал!!!
0
566 / 465 / 183
Регистрация: 14.10.2017
Сообщений: 1,259
28.03.2018, 14:11
как вариант с меньшим количеством изменений DOM:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let selectium = document.querySelector('select');
let divium = document.querySelector('div');
selectium.onchange = function (){
    let inputQuantity = Number(selectium.value);
    let dif = inputQuantity - divium.children.length;
    if(dif == 0) return false;
    if(dif > 0){
        for (let i = 0; i < dif; i++){
            elementInput = document.createElement('input');
            divium.appendChild (elementInput);  
        }
    }
    else
        for(let i = dif; i < 0; i++)
            divium.removeChild(divium.lastElementChild);
}
1
0 / 0 / 0
Регистрация: 24.12.2015
Сообщений: 58
28.03.2018, 14:29  [ТС]
а если например на странице не 1 select а 3, можно обратится не ByTagName а через id например
0
 Аватар для atanov
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,674
28.03.2018, 14:36
Конечно можно
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.03.2018, 14:36
Помогаю со студенческими работами здесь

Отображение загружаемого (еще не загруженного) изображения input file
Добрый день. Видел на некоторый сайтах, когда при выборе изображения в поле &lt;input type=&quot;file&quot;&gt; они сразу выводились...

Динамическое добавление input
Есть 2 кнопки сохранить и добавить, а так же 3 input. В input вводятся Ф.И.О., после чего мы нажимаем на кнопку сохранить, следовательно...

Добавление input в textarea с проверкой
Здравствуйте. Интересует функция на js или jquery Будут два input с типами 1. type=&quot;checkbox&quot; 2....

Передача цифр из одного input в другой
Проблема такая- есть 3 инпута (z1,z2,z3) ввожу в z1 вручную цифры - всё передаётся отлично, но к z1 прикреплён скролл, так вот если менять...

Добавление еще одного обработчика события к элементу
Подскажите, как добавить еще один обработчик события элемента, если для этого события уже установлены обработчики?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Программная установка даты и запрет ее изменения
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных через динамический список в справочнике
Maks 01.04.2026
Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru