Как динамически добавлять элемент массива HTML []
У меня есть форма, где мне нужно динамически добавлять столько текстовых полей, сколько захочет пользователь. Я хочу, чтобы текстовые поля были массивом, например:
<input type="text" name="room_text[]">
Я уже построил то, что, как я думал, будет работать. Он успешно добавляет больше текстовых полей. Я добавил еще два текстовых поля с javascript динамически, создав форму следующим образом:
<input type="text" name="room_text[]">
<input type="text" name="room_text[]">
<input type="text" name="room_text[]">
НО, когда я отправил его в файл PHP, он получает только первое значение. Причина, по которой я знаю это проблема javascript, состоит в том, что она отлично работает, если на странице загружено более одного текстового поля. Его просто, когда вы добавляете больше текстовых полей с javascript.
Если это помогает, это функция jquery, которую я использую для добавления полей:
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = $(this).parent('td').parent('tr').clone();
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).css("display", "none");
$(mu).after(clone);
$(clone).show("fast");
});
Я считаю, что проблема заключается в функции .clone()
. Можете ли вы попробовать другой метод, скажем...
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = '<tr>' + $(this).parent('td').parent('tr').html() + '</tr>';
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).css("display", "none");
$(mu).after(clone);
$(clone).show("fast");
});
ОБНОВЛЕНО - К сожалению. В этой версии "clone" - это строка, а не элемент, поэтому функции .children()
не работают... здесь исправлена версия:
$('.add').live("click", function() {
var mu = $(this).parent('td').parent('tr');
var clone = $('<tr>' + $(mu).html() + '</tr>');
$(clone).children('td').children('.add').remove();
$(clone).children('td').children('.redtext').remove();
$(clone).children('td').children('.remove').css("display", "inline");
$(clone).hide();
$(mu).after(clone);
$(clone).show("fast");
});