BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

<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>

Перед тегом </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>

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

Получай обновления блога!!! Подпишись:

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

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

  1. Елена

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

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

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

    Ответить

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

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

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

    <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\"><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>
    

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 788
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4419