| |
|
|
| | Представленный ниже код позволяет добавлять и удалять динамически поле. Писал не я.
Как ограничить количество полей 5-ю, вне зависимости от того, сколько раз они добавлялись и удалялись. Возможно это просто доделать, возможно сложно. Не знаю
Прошу помочь, потому что в Java я полный ноль. Помогите пожалуйста!
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" name=\"item" + items;
newitem+="\" size=\"35\"> <a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" name="item1" size="35"> <a href="#" onclick="a('a1')">удалить</a><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(14.03.2010 в 21:27)
| | | Добавить 1 строчку [две]? )
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" name=\"item" + items;
newitem+="\" size=\"35\"> <a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" name="item1" size="35"> <a href="#"
onclick="a('a1')">удалить</a><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: ddhvvn
(14.03.2010 в 21:58)
| | | Спасибо Большое. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(14.03.2010 в 22:32)
| | | Почему выделенный текст не работает? - Добавляется текстовое поле, а должна добавиться кнопка.
Он должен добавить кнопку на экран если количество полей стало 4 и меньше. Кнопка удаляется с экрана если число полей для ввода стало равно 5 кодом:
if (items == 5){
b('add')
}
|
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" name=\"item" + items;
newitem+="\" size=\"35\">";
newitem+="<a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
it="item"+items;
div=document.getElementById("items");
span=document.getElementById(it);
newbutton="<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
button=document.createElement("input");
button.innerHTML=newbutton;
div.appendChild(button);}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" name="item1" size="35"><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 10:30)
| | | А так просто не добавляет кнопку, хотя вроде как должно:
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
it="item"+items;
document.getElementById("it").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 11:23)
| | | Нашёл ошибку - отсутствовал идентификатор ID. Добавил где нужно. Но выделенный код по прежнему не работает и не добавляет кнопку.
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" id=\"item" + items;
newitem+="name=\"item" + items;
newitem+="\" size=\"35\">";
newitem+="<a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
it="item4";
document.getElementById("it").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" id="item1" name="item1" size="35"><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 11:48)
| | | Кнопка стала появлятся, но во-первых она не работает. Во-вторых если удаляю не последнее поле, а второе или первое - то оно появляется после того поля которое удалил, хотя кнопка по условию должна появиться только после 4 поля и 1 раз по условию.
Такое ощущение что переменная items как то неправильно работает. Или я не понимаю принцип.
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" ID=\"it" + items;
newitem+="name=\"item" + items;
newitem+="\" size=\"35\">";
newitem+="<a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
document.getElementById("a4").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" ID="it1" name="item1" size="35"><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 13:02)
| | | Ура, победил! Ну да, не сразу понял. Главное что разобрался!
if (items == 4){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 13:02)
| | | -- | |
| |
|
|
