Внесение изменений в HTML-форму при помощи JavaScript

Задача: Создать html документ с формой, в которой есть поле input[type=’number’] и кнопка при нажатии которой в форму будет добавлен блок, содержащий еще один input[type=’number’] и кнопка «Удалить», при нажатии которой этот блок удалится из формы.
Максимальное число добавляемых блоков не должно превышать 5.

Решение: Для начала сама форма

Выглядит это так:

Поле типа «number» и кнопка по условию задачи. Скрытое поле для организации счетчика добавленных блоков «поле-кнопка».
Для выполнения задачи организуем функцию
function sendForm(e) {

Перед добавлением поля проверим счетчик:
var keyBox = document.add_number.count;
var val = keyBox.value;
if(val >= 5){
alert(«5 полей уже добавлено!»);
e.preventDefault();
}

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

Иначе:
else {
document.add_number.count.value++;
var pElement = document.createElement(«input»);
var bElement = document.createElement(«input»);

Добавляем счетчику единичку и создаем оба нужных поля. Устанавливаем значения этих полей:
pElement.value = val;
pElement.type = «number»;
pElement.name = «key» + val;

bElement.value = «Удалить»;
bElement.type = «button»;
bElement.name = «del» + val;

Для кнопки удаления добавляем вызов функции, в которой уменьшаем на единицу счетчик и удаляем комплект «поле-кнопка»
bElement.onclick=function (){
document.add_number.count.value—;
pElement.remove();
this.remove();
return false;
};

Вот, как выглядит наша форма после добавления и удаления нескольких полей:

Добавляем готовые элементы в форму:
document.add_number.appendChild(pElement);
document.add_number.appendChild(bElement);

С функцией закончили, теперь нужно грамотно ее вызвать. Делаем это через обработчик:
var sendButton = document.add_number.send;
sendButton.addEventListener(«click», sendForm);

Вот и весь скрипт. Теперь весь текст целиком:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″ />
</head>
<body>
<script>
function sendForm(e){

// получаем значение поля key
var keyBox = document.add_number.count;
var val = keyBox.value;
if(val >= 5){
alert(«5 полей уже добавлено!»);
e.preventDefault();
}
else {
document.add_number.count.value++;
//alert(«Отправка разрешена» + document.add_number.count.value);
// создаем новые элементы
var pElement = document.createElement(«input»);
var bElement = document.createElement(«input»);
// устанавливаем у них значения
pElement.value = val;
pElement.type = «number»;
pElement.name = «key» + val;

bElement.value = «Удалить»;
bElement.type = «button»;
bElement.name = «del» + val;
// для кнопки добавляем вызов функции
// в функции уменьшаем на единицу счетчик и удаляем комплект «поле-кнопка»
bElement.onclick=function (){
document.add_number.count.value—;
pElement.remove();
this.remove();
return false;
};
// добавляем новые элементы в форму
document.add_number.appendChild(pElement);
document.add_number.appendChild(bElement);
}
}

var sendButton = document.add_number.send;
sendButton.addEventListener(«click», sendForm);

</script>
</body>
</html>

Внесение изменений в HTML-форму при помощи JavaScript

+7 (925) 462-91-98