Нашел в интернете скрипт, который позволяет динамически добавлять текстовые поля в форму. Т.е изначально на форме есть одно текстовое поле и ссылка ДОБАВИТЬ. Я на него нажимаю, добавляется еще одно текстовое поле и.т.д...У каждого вновь добавленнного поля имеется ссылка "Удаление", что при нажатии на него именно ЭТО поле удаляется.
Вопрос у меня вот в чём: как сделать аналогичную вещь, только тут у меня будет не просто текстовое поле для ввода, а еще будет <select>, значения которого будут из БД вытаскиваться? Т.е изначально есть один селект и текстовое поле, потом наживаю "добавить", еще одна пара селект-текстовое поле добавляются ит.д....
Я так понял, что обычным яваСкриптом, как этот вариант написан, тут не обойтись, нужно что-то типа Аякса использовать. Я написал нечто аналогичное средствами пхп+мускул+аякс, но оно как-то криво и немного не так, как хотелось работает (не смог я там удаление реализовать, да и постоянно перерисоввываются все селекты).
Поэтому прошу вашей помощи, как на таком вот примере можно реализовать мою задачу.
<form method="POST" action="form.php">
<div id="parentId">
<div>
<input name="name_1" type="text" />
<a onclick="return deleteField(this)" href="#">[X]</a>
</div>
</div>
<input class="s" type="submit" value="GO!" />
</form>
<a onclick="return addField()" href="#">Добавить поле</a>
<script>
var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 5; // Максимальное число возможных полей
function deleteField(a) {
// Получаем доступ к ДИВу, содержащему поле
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 = "<input name=\"name_" + curFieldNameId + "\" type=\"text\" /> <a onclick=\"return deleteField(this)\" href=\"#\">[X]</a>";
// Добавляем новый узел в конец списка полей
document.getElementById("parentId").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
</script>
Спустя 7 минут, 23 секунды (23.02.2011 - 23:30) inpost написал(а):
Гость_Алексей
Интересует вопрос, раздел форума: "PHP для начинающих", где тут PHP ?
Интересует вопрос, раздел форума: "PHP для начинающих", где тут PHP ?
Спустя 3 минуты, 31 секунда (23.02.2011 - 23:33) Guest написал(а):
Да, извиняюсь если я не туда вписал сообщение!
Пример кода конечно на html и JavaScript, но вопрос мой именно по тематике PHP...
Пример кода конечно на html и JavaScript, но вопрос мой именно по тематике PHP...
Спустя 29 минут, 25 секунд (24.02.2011 - 00:02) Гость_Алексей написал(а):
Я это пытался примерно вот так реализовать:
Изначально выглядит вот так форма:

Проблема вот в чём. Скажем я нажимаю на кнопку "Добавить поле" 4 раза, у меня создаётся 4 раза пара <select>/<input type="text">, я это всё дело заполняю (как на картинке 1), а потом, например, я ошибся, мне надо было не 4, а 5 полей сделать, я нажимая "добавить поле" и у меня всё что я вводил в эти 4, всё слетает как изначально было (картинка 2).
Картинка 1

Картинка 2

По смыслу понятно что там в коде не туда я прописал <div>, но вот как правильно сделать, я не знаю...(причём первые поля на форме, которые "Заголовок" и "Новость" тут всё норм, т.е перерисовка этих 2 компонент не касается)
<?php
if(!isset($_GET['kolvo']))
{
// если 1й раз открыли форму, то нарисовать 1 элемент выбора из БД
$kolvo = 1;
}
else
{
// иначе к одному элементу выбора из БД дорисоввывать еще такие же элементы
$kolvo = $_GET['kolvo'];
}
if($kolvo == '1')
{
echo '<a href=member.php>Главная страница</a><p>
<script src="ajax_framework.js" language="javascript"></script>
<form action="form.php" method=post>
Заголовок:<br><input type=text name=header_add size=30 maxlength=25><br>
Новость:<br>
<textarea name=text_add cols=40 rows=4><textarea><p>';
echo '<div id="login_response">';
echo '<select style="width:140px;" name="name_1">';
$result = get_name('sotrud');
foreach($result as $cat)
{
echo '<option value="'. $cat['ID_sotrud'] .'"';
echo '">';
echo $cat['name_sotrud'];
echo "\n";
}
echo '</select><input type=text name="name2_1" size=10 maxlength=5><br>';
$kolvo++;
echo '<input type="button" value="Добавить поле" onClick="insert_elem('. $kolvo .');">';
echo '<input type=submit value="Добавить новость" name="save"></form>';
echo '</div>';
}
else
// иначе пусть АЯКС прорисовывает только элементы <select> и <input type="text">, а не всю форму заново!
{
for($i = 1; $i <= $kolvo; $i++)
{
echo '<select style="width:140px;" name="name_'. $i .'">';
$result = get_name('sotrud');
foreach($result as $cat)
{
echo '<option value="'. $cat['ID_sotrud'] .'"';
echo '">';
echo $cat['name_sotrud'];
echo "\n";
}
echo '</select><input type=text name="name2_'. $i .'" size=10 maxlength=5>';
echo '<br>';
}
$kolvo++;
echo '<input type="button" value="Добавить поле" onClick="insert_elem('. $kolvo .');">';
echo '<input type=submit value="Добавить новость" name="save"></form>';
}
?>
Изначально выглядит вот так форма:

Проблема вот в чём. Скажем я нажимаю на кнопку "Добавить поле" 4 раза, у меня создаётся 4 раза пара <select>/<input type="text">, я это всё дело заполняю (как на картинке 1), а потом, например, я ошибся, мне надо было не 4, а 5 полей сделать, я нажимая "добавить поле" и у меня всё что я вводил в эти 4, всё слетает как изначально было (картинка 2).
Картинка 1

Картинка 2

По смыслу понятно что там в коде не туда я прописал <div>, но вот как правильно сделать, я не знаю...(причём первые поля на форме, которые "Заголовок" и "Новость" тут всё норм, т.е перерисовка этих 2 компонент не касается)
Спустя 3 дня, 15 часов, 22 минуты, 32 секунды (27.02.2011 - 15:25) Гость_Алексей написал(а):
Неужели никто ничего подобного не делал? (