Здравствуйте.
Есть код по динамическому добавлению полей:
<form>
<div id="inputi">
<div><input name="my_input"><input type="button" value="+" onclick="add_input(this.parentNode)"></div>
</div>
</form>
<script language="javascript">
// Теперь эта функция будет принимать указатель на объект, после которого нужно осуществить вставку
<script language="javascript">
// Теперь эта функция будет принимать указатель на объект, после которого нужно осуществить вставку
function add_input(obj)
{
var new_input=document.createElement('div');
new_input.innerHTML='<table border="2"><tr><td>Изображение '+(document.getElementById('inputi').getElementsByTagName('div').length + 2)+'</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required">';
// Дописываем рядом с input-ом кнопку, она будет добовлять элемент именно под input, рядом с которым она находится
new_input.innerHTML=new_input.innerHTML+'<input type="button" value="+" onclick="add_input(this.parentNode)">';
// И еще одна кнопочка для его удаления.
new_input.innerHTML=new_input.innerHTML+'<input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
//Ищем присутствует ли следующий узел в структуре DOM-а
if (obj.nextSibling)
// если да - то создаем после него
document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
//если такого не нашлось то просто добавляем в конец
else document.getElementById('inputi').appendChild(new_input);
}
// А эта функция будет принимать указатель на объект, который нужно удалить
function del_input(obj)
{
document.getElementById('inputi').removeChild(obj)
}
</script>
<form action="1.php" name="test" id="test">
<div id="inputi"><table border="2">
<tr><td>Изображение 1</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required"><input type="button" value="+" onclick="add_input(this.parentNode)">
</td></tr></table></div></form>
В таком варианте код и добавляет и удаляет поля, кнопки добавления у удаления находятся под строкой (не в одной строке, а под ней).
Если изменить скрипт добавления полей так:
function add_input(obj)
{
var new_input=document.createElement('div');
new_input.innerHTML='<table border="2"><tr><td>Изображение '+(document.getElementById('inputi').getElementsByTagName('div').length + 2)+'</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required"><input type="button" value="+" onclick="add_input(this.parentNode)"><input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
// Дописываем рядом с input-ом кнопку, она будет добовлять элемент именно под input, рядом с которым она находится
//new_input.innerHTML=new_input.innerHTML+'<input type="button" value="+" onclick="add_input(this.parentNode)">';
// И еще одна кнопочка для его удаления.
//new_input.innerHTML=new_input.innerHTML+'<input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
//Ищем присутствует ли следующий узел в структуре DOM-а
if (obj.nextSibling)
// если да - то создаем после него
document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
//если такого не нашлось то просто добавляем в конец
else document.getElementById('inputi').appendChild(new_input);
}
То все кнопки находятся в одной строке, но тогда не срабатывает удаление поля инпут.
Ломаю голову, но не могу понять в чем ошибка
Пожалуйста подскажите в чем ошибка и как можно ограничить количество добавления полей.
