как удалить form'у
Привет!
Есть код. Добавление формы на старницу с двумя textпо нажатию на кнопку.
function CreateFormElement(){
var createtime = new Date().getTime();
var Form = document.getElementById('fms')
var Inner = document.createElement('input');
Inner.type = 'text';
Inner.value = '';
Inner.name = 'size___' + createtime;
Form.appendChild(Inner);
var Form2 = document.getElementById('fms')
var Inner2 = document.createElement('input');
Inner2.type = 'text';
Inner2.value = '';
Inner2.name = 'price___' + createtime;
Form2.appendChild(Inner2);
var Br = document.createElement('br');
Form.appendChild(Br);
}
<input type="button" value="добавить поля формы" onClick="CreateFormElement()"> Как удалить одну из форм, если она стала не нужна?! |
Цитата:
var Form3 = document.getElementById('fms')
var Form4 = document.getElementById('fms')
var Form5 = document.getElementById('fms')
Веселуха же!!! Цитата:
form.removeChild(input); // где form - ссылка на элемент формы, input - ссылка на удаляемое поле. Цитата:
|
Вы очень жестоко меня троллите! Я расстроен! =D
Удалить форму. Нажимаем на кнопку добавить, скажем 3 раза, появляется 3 формы с 2 полями. Мне захотелось удалить 2-ую форму. Как это сделать!? Я за код прошу прощения, ибо вообще не шарю в JS. И тут я именно поэтому. Ну а вообще, спасибо. Хоть и троллите, но помогаете. =) |
Цитата:
Цитата:
http://shpargalkablog.ru/2013/08/app...avascript.html |
Цитата:
Цитата:
Цитата:
<!DOCTYPE html>
<form id="fms"></form>
<script>
var fields = [];
function addField(){
var form = document.getElementById('fms');
var field = document.createElement('div');
var inputs = ['size', 'price'];
for (var i = 0; i < inputs.length; i++) {
var input = document.createElement('input');
input.name = inputs[i] + '[]';
field.appendChild(input);
}
form.appendChild(field); // добавляем на страницу
fields.push(field); // добавляем в наш массивчик
}
function removeField(index) {
var field = fields[index];
if (!field)
return alert('Нет формы с индексом ' + index);
field.parentNode.removeChild(field); // удаляем из страницы
fields.splice(index, 1); // удаляем из массивчика
}
</script>
<input type="button" value="добавить поля формы" onclick="addField()">
<input type="button" value="удалить второе поле" onclick="removeField(1)">
|
Цитата:
|
Цитата:
|
Цитата:
|
Спасибо за ответы! =)
|
Цитата:
|
Товарищи, а если в форму вложить кнопку?!
И удалять вот так!? <button onclick="this.parentNode.removeChild(this);">Вариант 1</button> <button onclick="this.remove();">Вариант 2</button> |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Желательно по нажатию на одну кнопку. Например: поставил курсор в одну форму, где парочка полей и по нажатию на кнопку, удаляешь . А нельзя к форме привязать такую кнопку, которая удаляет и себя и эту форму с полями? |
Цитата:
var field = this.parentNode; field.parentNode.removeChild(field); |
Цитата:
Сейчас попробую )! |
Цитата:
var field = this.parentNode; Записываем в функцию? а, <input type="button" onclock="field.parentNode.removeChild(field);", по кнопке?! Нет ?! ))) |
Цитата:
Обработчик надо через js, при создании кнопки навешивать.
button.onclick = function() {
alert('bla bla');
};
|
Цитата:
Тем не менее не пойму куда запихать var field = this.parentNode; field.parentNode.removeChild(field); |
Цитата:
|
Так и делал. А на форме написал:
<input type='button' value="DELETE" onClick="button.onClick()";/> Реакции нет. =( |
Цитата:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript">
function CreateFormElement(){
var createtime = new Date().getTime();
var Form = document.getElementById('fms')
var Inner = document.createElement('input');
Inner.type = 'text';
Inner.value = '';
Inner.name = 'size___' + createtime;
Form.appendChild(Inner);
var Br = document.createElement('br');
Form.appendChild(Br);
}
button.onClick = function () {
var field=this.parentNode;
field.parentNode.removeChild(field);
}
--></script>
<body> <form id="fms" method="get" action=""><br /> <input type="button" value="добавить поля формы" onClick="CreateFormElement()"> <input type="button" value="Delete" onClick="button.onClick()" /> </form> </body> </html> На конопку DELETE нажимаю, ничего не происходит. Да, можно одну кнопку. А можно и кнопку, которая будет появляться вместе с полем и по нажатию на нее, удалялось поле. |
Опять это уродство. А что, мой код забраковал? Чем плох?
Цитата:
Цитата:
|
Почему забраковал!? Вот же он:
button.onClick = function () {
var field=this.parentNode;
field.parentNode.removeChild(field);
}
А потом добавил кнопку: <input type="button" value="Delete" onClick="button.onClick()" /> и мое воспаленное воображение думало что удалится любое поле, которое я только захочу. )))))) А что касается второго вопроса. Я даже не понимаю о чем речь =D Можно ваш вариант как должно быть?! =) |
Цитата:
не <input> , а <input />. Также этот доктайп требует обязательный атрибут type у тега <script>. А вот атрибут language возможно даже запрещен. И вобще, один хер документ будет распарсен HTML-парсером, а не XML, так что пофиг. Ну все это по сути мелочи. Если бы браузеры всерьез воспринимали, то ща с бы неработало 99% интернет-страниц ))) Ибо веб-девелоперы в своем большинстве плюют на/не знают все эти "стандарты".
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form id="fms">
<script>
(function(){
var fields = [];
window.addField = function(){
var form = document.getElementById('fms');
var field = document.createElement('div');
var inputs = ['size', 'price'];
for (var i = 0; i < inputs.length; i++) {
var input = document.createElement('input');
input.name = inputs[i] + '[]';
field.appendChild(input);
}
form.appendChild(field); // добавляем на страницу
fields.push(field); // добавляем в наш массивчик
}
window.removeField = function() {
var field = fields.pop();
if (!field)
return alert('Нечего удалять');
field.parentNode.removeChild(field); // удаляем из страницы
}
})();
</script>
<input type="button" value="добавить поля формы" onclick="addField()">
<input type="button" value="удалить поля" onclick="removeField()">
</form>
</body>
|
Или даже так:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form id="fms">
<input type="button" name="add" value="добавить поля формы">
<input type="button" name="remove" value="удалить поля">
<script>
(function(){
var form = document.getElementById('fms');
var fields = [];
var buttons = {
add: form.add,
remove: form.remove
};
buttons.add.onclick = addField;
buttons.remove.onclick = removeField;
updateButtonsState();
function updateButtonsState() {
buttons.remove.disabled = fields.length <= 1;
}
function addField(){
var field = document.createElement('div');
var inputs = ['size', 'price'];
for (var i = 0; i < inputs.length; i++) {
var input = document.createElement('input');
input.name = inputs[i] + '[]';
field.appendChild(input);
}
form.appendChild(field); // добавляем на страницу
fields.push(field); // добавляем в наш массивчик
updateButtonsState();
}
function removeField() {
var field = fields.pop();
field.parentNode.removeChild(field); // удаляем из страницы
updateButtonsState();
}
})();
</script>
</form>
</body>
|
Оу, спасибо за разъяснение! Прям очень порадовало. Не ожидал =)
А удаляется только последние 2 из созданных...а если мне надо удалить поля из середины? По идее они должны быть заполнены. И как только одна из задач решена, поле удаляется, вручную ) |
Цитата:
|
Ок, спасибо большое! =)
|
| Часовой пояс GMT +3, время: 23:44. |