Главная » Эффекты для сайта » Добавление текстового поля с использованием JavaScript

Добавление текстового поля с использованием JavaScript

2016-01-24 / Вр:23:30 / просмотров: 8465

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

Как это выглядит?
При нажатии на кнопку «Добавить поле+», скрипт добавит еще одно дополнительное поле, и так будет добавлять с каждым нажатием кнопки, пока не устанете нажимать :smokes: . Посмотрите на демонстрацию:

[смотреть демонстрацию]

Перед тегом </head> вставьте вот этот JavaScript код:

<script>
var items=1;
function AddItem() {
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<strong>Поле " + items + ": </strong>";
newitem+="<input ENGINE=text name=item" + items;
newitem+=" size=45><br>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>

Перед тегом </body> вставьте вот этот HTML код:

form name="form-bloggood-ru">
<div ID="items">
<strong>Поле 1: </strong><input type="text" name="item1" size="45"><br>
<input type="button" value="Добавить поле+" onClick="AddItem();" ID="add">
</div>
</form>

Вот абсолютно готовый код:

<html>
<head>
<title>Полезный атрибут download для ссылок на HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script>
var items=1;
function AddItem() {
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<strong>Поле " + items + ": </strong>";
newitem+="<input type=text name=item" + items;
newitem+=" size=45><br>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>

</head>
<body>
<form name="form-bloggood-ru">
<div ID="items">
<strong>Поле 1: </strong><input type="text" name="item1" size="45"><br>
<input type="button" value="Добавить поле+" onClick="AddItem();" ID="add">
</div>
</form>
</body>
</html>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330348
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222536
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187748
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564

2 Ответов на комментарий - Добавление текстового поля с использованием JavaScript

Елена

06.09.2016 в 03:23

Добрый день! Подскажите, а как реализовать еще одно добавление поля. Т.е. добавляется текстовое поле и к нему поле “добавления даты”.
И как лучше всего реализовать сложение числовых данных с добавленного поля. Нужно операторные скобки ?

П.С.начинаю изучать язык, на примерах.

с уважением, Елена!!

Степан => автор блога

13.09.2016 в 23:34

Здравствуйте, Елена!

<html>
<head>
<title>Полезный атрибут download для ссылок на HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<script>
var items=1;
function AddItem() {
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<strong>Поле " + items + ": </strong>";
newitem+="<input ENGINE=text name=item" + items;
newitem+=" size=45><input id=date name=date type=date><br>";

newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>
 
</head>
<body>
<form name="form-bloggood-ru">
<div ID="items">
<strong>Поле 1: </strong><input type="text" name="item1" size="45"><input id="date" name="date" type="date"/>
<br>
<input type="button" value="Добавить поле+" onClick="AddItem();" ID="add">
</div>
</form>
</body>
</html>