Ограничить число добавляемых элементов

@dotez · Регистрация: 01.04.2017

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

Ребята есть вот такой скрипт-

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
var countBox = 1;
function addInput(){
var boxName = "Доп. опция "+countBox;
var spanElement = document.getElementById("responce");
spanElement.innerHTML +=
"<br />"+
"<input maxlength='70' style='height:40px;width:200px' type='text' id='"+ boxName +"' value='' name='OptionsName' placeholder='Название' />"+
"<input maxlength='10' style='height:40px;width:150px' type='text' id='"+ boxName +"' value='' name='OptionsSumm' placeholder='Цена в Р' />"+
"<input maxlength='3' style='height:40px;width:220px' type='text' id='"+ boxName +"' value='' name='OptionsDates' placeholder='Кол-во дней' />"+
"<br />";
countBox++;
}
</script>
<input type="button" class="btn btn-success btn-sm" style="color:black" value="Добавить опцию" onclick="addInput()"/>
<span id="responce"></span>

При нажатии на кнопку "добавить опции" добавляются строки как на приложении скриншоте. Так вот их добавляет сколько угодно, а как поставить на кнопку ограничение чтобы больше 3 не добавлялось?

@xoraxax · 24.05.2020, 19:45

1)

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

"<br />"+
"<input maxlength='70' style='height:40px;width:200px' type='text' id='"+ boxName +"' value='' name='OptionsName' placeholder='Название' />"+
"<input maxlength='10' style='height:40px;width:150px' type='text' id='"+ boxName +"' value='' name='OptionsSumm' placeholder='Цена в Р' />"+
"<input maxlength='3' style='height:40px;width:220px' type='text' id='"+ boxName +"' value='' name='OptionsDates' placeholder='Кол-во дней' />"+
"<br />";

вместо <br> убери в div. Разные элементы с одинаковыми id - недопустимо
В начале функции делаешь if (document.getElementsByClassName("class_ твоего_diva").length < 3) {добавить новый див}
2) javascript - это не ява, пиши в соответствующий раздел

@dotez · 24.05.2020, 19:56 **[ТС]**

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

вместо <br> убери в div. Разные элементы с одинаковыми id - недопустимо

ну это я сделал-

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <script type="text/javascript">
var countBox = 1;
function addInput(){
var boxName = "Доп. опция "+countBox;
var spanElement = document.getElementById("responce");
spanElement.innerHTML +=
"<div />"+
"<input maxlength='70' style='height:40px;width:200px' type='text' id='"+ boxName +"' value='' name='OptionsName' placeholder='Название' />"+
"<input maxlength='10' style='height:40px;width:150px' type='text' id='"+ boxName +"' value='' name='OptionsSumm' placeholder='Цена в ₸' />"+
"<input maxlength='3' style='height:40px;width:220px' type='text' id='"+ boxName +"' value='' name='OptionsDates' placeholder='Кол-во дней' />"+
"<div />";
countBox++;
}
</script>
<input type="button" class="btn btn-success btn-sm" style="color:black" value="Добавить опцию" onclick="addInput()"/>
<span id="responce"></span>

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

@xoraxax · 24.05.2020, 20:28

Ну прочитай хоть немного по html, ерунду же написал. Кто мешает тебе добавить класс?

Добавлено через 14 минут

HTML5
1
2
<div id="response"></div>
<input type="button" class="btn btn-success btn-sm" style="color:black" value="Добавить опцию" onclick="addOption()"/>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function addOption(){
    if (document.getElementsByClassName("option").length < 3) {
    var spanElement = document.getElementById("response");
    spanElement.innerHTML +=
  
    "<div class='option'>"+
    "<input maxlength='70' style='height:40px;width:200px' type='text'  value='' name='OptionsName' placeholder='Название' />"+
"<input maxlength='10' style='height:40px;width:150px' type='text'  value='' name='OptionsSumm' placeholder='Цена в ₸' />"+
"<input maxlength='3' style='height:40px;width:220px' type='text'  value='' name='OptionsDates' placeholder='Кол-во дней' />"+
"</div>";
}
}

https://jsfiddle.net/pgj081sb/

@dotez · 24.05.2020, 21:01 **[ТС]**

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

https://jsfiddle.net/pgj081sb/

получилось! Благодарствую)

Добавлено через 22 минуты

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

Добавлено через 14 минут
https://jsfiddle.net/pgj081sb/

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

@xoraxax · 24.05.2020, 21:23

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function addOption(){
    if (document.getElementsByClassName("option").length < 3) {
        var element = document.getElementById("response");
    createNewOption(element);
    }
}
 
function createNewOption(element) {
    var newRow = document.createElement('div');
  newRow.className="option";
    createNewInput(70, "200px", "OptionsName", "Название", newRow);
  createNewInput(10, "150px", "OptionsSumm", "Цена", newRow);
  createNewInput(3, "220px", "OptionsDates", "Кол-во дней", newRow);
    element.appendChild(newRow);
}
 
function createNewInput(length, width, name, placeholder, element) {
    var newInput = document.createElement('input');
  newInput.setAttribute("maxLength", length);
  newInput.setAttribute("maxWidth", width);
  newInput.setAttribute("name", name);
  newInput.setAttribute("placeholder", placeholder);
  element.appendChild(newInput);
}

так и быть https://jsfiddle.net/ry0tjfpa/

@dotez · 24.05.2020, 21:37 **[ТС]**

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

так и быть https://jsfiddle.net/ry0tjfpa/

во, классно!

@dotez · 25.05.2020, 03:19 **[ТС]**

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

так и быть https://jsfiddle.net/ry0tjfpa/

подскажите пожалуйста, а почему когда я ввожу вот так-

JavaScript
1
newInput.setAttribute("name", name + '1');

то он не прибавляет 1 как цифру а просто дописывает ее всем (см. вложение), а я хочу чтобы они 1 2 3 становились иначе как их потом использовать то с одним именем))))))

@dotez · 25.05.2020, 14:18 **[ТС]**

кто-нибудь подскажет как 1 прибавить к Name-ам ?))

@Iverycool · 25.05.2020, 15:56

dotez, можно сделать так:

JavaScript
1
newInput.setAttribute("name", name + document.getElementsByClassName("option").length + 1)

@dotez · 25.05.2020, 16:12 **[ТС]**

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

newInput.setAttribute("name", name + document.getElementsByClassName("option" ).length + 1)

cпасибо! вы почти правы оказались, ток надо еще в скобочки взять-

JavaScript
1
newInput.setAttribute("name", name + (document.getElementsByClassName("option").length + 1));

Благодарствую!

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

Ограничить число добавляемых элементов

Решение

Решение

Решение

@dotez 4 / 4 / 2 Регистрация: 01.04.2017 Сообщений: 415
	25.05.2020, 14:18 [ТС]
	кто-нибудь подскажет как 1 прибавить к Name-ам ?)) 0