Как реализовать добавление полей формы в зависимости от выбранного количества в селекторе

@offelock · Регистрация: 13.03.2021

Студворк — интернет-сервис помощи студентам

Используя HTML5 и JavaScript необходимо реализовать добавление полей в форме в зависимости от выбранного значения в селекторе. Диапазон от 0 до 10. При выборе значения "0" поля не создаются. Так же необходимо удалить или добавить поля при изменении значения селектора (либо удалить все существующие и создать заново).

Добавлено через 4 минуты
Имеется следующий код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<li><label for="num">Количество полей:</label></li>
<li><select id="num" name="num" onBlur="num_validation();">
<option selected="" value="Default"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><span id="num_err"></span></li>

Необходимо что бы при выборе селектора создавалось указанное количество полей под селектором.
Поля должны иметь следующий вид:

HTML5
1
2
<li><label for="fio">ФИО:</label></li>
<li><input type="text" name="fio" id="fio" size="50" onBlur="fio_validation();"/><span id="fio_err"></span></li>

Соответственно каждое поле должно иметь уникальное имя (fio1, fio2, и т.п.)
Пересмотрел несколько вариантов добавления полей и скрытия/отображения созданных полей, но все что смотрел не подходит, а как переделать под свою логику не могу понять.
Нужна помощь.

@amr-now · 13.03.2021, 20:12

Здравствуйте.
Если упрощенно, то так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <style>
        form {
            width:fit-content;
            border: 1px solid black;
            padding: 0.5em;
        }
 
        div.caption {
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.5em;
        }
 
        li {
            display: block;
            list-style-type: none;
            /* Убираем маркеры */
        }
 
        ul {
            padding-left: 0;
        }
 
        label {
            display: inline-block;
            width: 50px;
        }
 
        label.num {
            display: inline-block;
            width: 150px;
        }
 
        select {
            width: 58px;
            padding-left: 1em;
            margin-bottom: 0.5em;
        }
 
        input[type="text"] {
            width: 188px;
            text-align: left;
            padding-left: 1em;
            margin-bottom: 0.5em;
        }
 
        input[type="submit"] {
            display: block;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <form>
        <div class="caption">Список фамилий</div>
        <label class="num">Количество полей:</label><select name="num">
            <option value="" selected disabled>nn:</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select><br>
        <ul class="months"></ul>
        <input type="submit" value="Отправить">
    </form>
    <script>
        let form = document.forms[0];
        form.onsubmit = form_submit;
        form.num.onchange = coumt_change;
 
        function coumt_change() {
            let count = + this.value;
            let container = form.querySelector(".months");
            container.innerHTML = "";
 
            for (let i = 0; i < count; i++) {
                container.insertAdjacentHTML("beforeend",
                    `<li><label>ФИО:</label></li>
<li><input type="text" name="fio${i + 1}"><span class="fio_err"></span></li>`
                );
            }
        }
        function form_submit(e) {
            e.preventDefault();
        }
    </script>
</body>
 
</html>

id напихивать где попало нет смысла. Если мешают, лучше вообще выкинуть.
Размеры надо задавать только в стилях.
Обработчики событий навешивать в коде JS.

@offelock · 14.03.2021, 05:25 **[ТС]**

Это то что нужно. Единственное есть вопрос. Как поменять указание места создания полей? Что бы они создавались не в конкретном <ul class="months"></ul>, а скажем после какого-либо <li></li>.
Например:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
<li></li>
//создаваемые поля (либо тут)
<li></li>
<li><label class="num">Количество полей:</label></li>
<li><select name="num">
            <option value="" selected disabled>nn:</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select></li>
//создаваемые поля (либо тут)
<li></li>
</ul>

idшники для проверки заполнения форм.

@amr-now · 14.03.2021, 06:44

offelock, с отдельным контейнером для удаляемых фамилий было бы проще.
Сейчас одна логическая запись состоит из двух <li>, а не из одного. Обычно метку с полем ввода помещают в единый маленький контейнер.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        form {
            width: fit-content;
            border: 1px solid black;
            padding: 0.5em;
        }
 
        div.caption {
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.5em;
        }
 
        li {
            display: block;
            list-style-type: none;
            /* Убираем маркеры */
        }
 
        ul {
            padding-left: 0;
        }
 
        label {
            display: inline-block;
            width: 50px;
        }
 
        label.num {
            display: inline-block;
            width: 150px;
        }
 
        select {
            width: 58px;
            padding-left: 1em;
            margin-bottom: 0.5em;
        }
 
        input[type="text"] {
            width: 188px;
            text-align: left;
            padding-left: 1em;
            margin-bottom: 0.5em;
        }
 
        input[type="submit"] {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <form>
        <div class="caption">Список фамилий</div>
        <ul class="list">
            <li>
                <label class="num">Количество полей:</label>
                <select name="num">
                    <option value="" selected disabled>nn:</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </li>
        </ul>
        <input type="submit" value="Отправить">
    </form>
    <script>
        let form = document.forms[0];
        form.onsubmit = form_submit;
        form.num.onchange = coumt_change;
 
        function coumt_change() {
            let count = + this.value;
            let container = form.querySelector(".list");
            // Удаление "детей", кроме первого,  с началом имени "fio"
            let child, sibling;
            while ((child = container.children[1]) && (sibling = child.nextElementSibling)
                && sibling.firstElementChild.name.startsWith("fio")) {
                sibling.remove();
                child.remove();
            }
 
            for (let i = 0; i < count; i++) {
                container.insertAdjacentHTML("beforeend",
                    `<li><label>ФИО:</label></li>
<li><input type="text" name="fio${i + 1}"><span class="fio_err"></span></li>`
                );
            }
        }
        function form_submit(e) {
            e.preventDefault();
        }
    </script>
</body>
</html>

@offelock · 14.03.2021, 09:40 **[ТС]**

Спасибо за оба варианта, преобразую свой код и вставлю первый вариант. Немного не понял принцип второго варианта.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@offelock 0 / 0 / 0 Регистрация: 13.03.2021 Сообщений: 9
	14.03.2021, 09:40 [ТС]
	Спасибо за оба варианта, преобразую свой код и вставлю первый вариант. Немного не понял принцип второго варианта. 0

Как реализовать добавление полей формы в зависимости от выбранного количества в селекторе

Решение