Как добавить новое поле на JavaScript

03.04.2018 11:30:18 am

Допустим у нас есть такая форма:

<form method="post">
	<div id="inputs">
		<input type="text" />
	</div>
</form>

В эту форму нам необходимо добавлять поля по требованию пользователя, то есть, если пользователю нужно еще одно поле, он жмет кнопку "Добавить поле" и появляется, собственно, новое поле.

Делаем так: перед закрывающимся тегом формы (</form>) добавляем кнопку, нажав на которую и будет добавлено новое поле:

	<button type="button" onclick="addInput();">Добавить поле</button>

В коде кнопки присутствует атрибут "onclick": onclick="addInput();", это значит, при нажатии на кнопку будет запущена JS функция "addInput", что создаст новый элемент формы. Вот так выглядит сама функция (код прокомментировал):

function addInput() {
	var inputs = document.getElementById('inputs'); // Получение блока с id "inputs"
	var newInput = document.createElement('input'); // Создание нового элемента "input"
	newInput.setAttribute('type', 'text'); // Добавление аттрибута к новому элементу
	inputs.appendChild(newInput);          // Добавление нового элемента в конец блока (id="inputs")
};

Теперь при нажатии на кнопку в блоке появится новое поле.

Жалоба