Добрый день!
Хочу сделать динамическое добавление доп.поля при добавлении новости, чтобы не замогрождать страницу пустыми полями. Изначально доп.поля были уже созданы, теперь задача в том, чтобы при нажатии на кнопку добавить, появлялись поля и присваивалось им имя по номеру, например; "gorod1" gorod2" "gorod3" и т.п.
Все это сделать я нашёл решение, все прекрасно работает, но, за исключением одного. Не передает правильно имя доп.поля.
Вот как выводится код в браузере:
<input type="text" name="xfield[ingredient[1]]" id="xf_ingredient[1]" value="">
Что есть не правильно, и на сайте выводится не будет.
Как сделать так, чтобы поля имели правильное значение, как здесь:
<input type="text" name="xfield[ingredient[1]" id="xf_ingredient1" value="">
Вот сам исходник:
<div id="parentId">
<div>
<nobr>
<ul class="ingredient-b">
<li class="input-ingr">
<input type="text" name="xfield[ingredient[1]]" id="xf_ingredient[1]" value="">
</li>
<li class="input-kol">
<input type="text" name="xfield[kol-ingredient[1]]" id="xf_kol-ingredient[1]" value="">
</li>
<li class="select-multiple">
<select name="xfield[gramm-ingredient[1]]">
<option value="0">Грамм</option>
<option value="1">Килограмм</option>
<option value="2">Штука</option>
<option value="3">Щепотка</option>
<option value="4">Дэш</option>
<option value="5">Веточка</option>
<option value="6">Стебель</option>
<option value="7">Кусок</option>
<option value="8">Пучок</option>
<option value="9">Зубчик</option>
<option value="10">Головка</option>
<option value="11">По вкусу</option>
<option value="12">На кончике ножа</option>
<option value="13">Столовая ложка</option>
<option value="14">Чайная ложка</option>
<option value="15">Литр</option>
<option value="16">Миллилитр</option>
<option value="17">Стакан</option>
<option value="18">Банка</option>
</select>
</li>
</ul>
<a style="color:red;" onclick="return deleteField(this)" href="#">[—]</a>
<a style="color:green;" onclick="return addField()" href="#">[+]</a>
</nobr>
</div>
</div>
<script>
var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 3; // Максимальное число возможных полей
function deleteField(a) {
if (countOfFields > 1)
{
// Получаем доступ к ДИВу, содержащему поле
var contDiv = a.parentNode;
// Удаляем этот ДИВ из DOM-дерева
contDiv.parentNode.removeChild(contDiv);
// Уменьшаем значение текущего числа полей
countOfFields--;
}
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
function addField() {
// Проверяем, не достигло ли число полей максимума
if (countOfFields >= maxFieldLimit) {
alert("Число полей достигло своего максимума = " + maxFieldLimit);
return false;
}
// Увеличиваем текущее значение числа полей
countOfFields++;
// Увеличиваем ID
curFieldNameId++;
// Создаем элемент ДИВ
var div = document.createElement("div");
// Добавляем HTML-контент с пом. свойства innerHTML
div.innerHTML = "<nobr><ul class=\"ingredient-b\"><li class=\"input-ingr\"><input type=\"text\" name=\"xfield[ingredient[" + curFieldNameId + "]]\" id=\"xf_ingredient[" + curFieldNameId + "]\" value=\"\"></li><li class=\"input-kol\"><input type=\"text\" name=\"xfield[kol-ingredient[" + curFieldNameId + "]]\" id=\"xf_kol-ingredient[" + curFieldNameId + "]\" value=\"\"></li><li class=\"select-multiple\"><select name=\"xfield[gramm-ingredient[" + curFieldNameId + "]]\"><option value=\"0\">Грамм</option><option value=\"1\">Килограмм</option><option value=\"2\">Штука</option><option value=\"3\">Щепотка</option><option value=\"4\">Дэш</option><option value=\"5\">Веточка</option><option value=\"6\">Стебель</option><option value=\"7\">Кусок</option><option value=\"8\">Пучок</option><option value=\"9\">Зубчик</option><option value=\"10\">Головка</option><option value=\"11\">По вкусу</option><option value=\"12\">На кончике ножа</option><option value=\"13\">Столовая ложка</option><option value=\"14\">Чайная ложка</option><option value=\"15\">Литр</option><option value=\"16\">Миллилитр</option><option value=\"17\">Стакан</option><option value=\"18\">Банка</option></select></li></ul><a style=\"color:red;\" onclick=\"return deleteField(this)\" href=\"#\">[—]</a><a style=\"color:green;\" onclick=\"return addField()\" href=\"#\">[+]</a></nobr>";
// Добавляем новый узел в конец списка полей
document.getElementById("parentId").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
</script>
Всем заранее огромное спасибо!
