Автоматическое добавление полей в форму
Здравствуйте. Для начала, хочу сказать огромное спасибо ребятам, за оперативное решение предыдущей проблемы! Но... теперь есть кое-чего нового.
В общем, вот код: <table><tr> <td><input type="text" name="term_1" size="30" placeholder="Термин" /></td> <td><img src="templates/images/right_uk.png" /></td> <td><input type="text" name="explan_1" size="100" placeholder="Определение" /></td> <td><a class="admin_quest_button north" href="#" title="Удалить этот термин"><img src="templates/images/del_q.png" /></a></td> </tr></table> <table><tr> <td><input type="text" name="term_2" size="30" placeholder="Термин" /></td> <td><img src="templates/images/right_uk.png" /></td> <td><input type="text" name="explan_2" size="100" placeholder="Определение" /></td> <td><a class="admin_quest_button north" href="#" title="Удалить этот термин"><img src="templates/images/del_q.png" /></a></td> </tr></table> <table><tr> <td><input type="text" name="term_3" size="30" placeholder="Термин" /></td> <td><img src="templates/images/right_uk.png" /></td> <td><input type="text" name="explan_3" size="100" placeholder="Определение" /></td> <td><a class="admin_quest_button north" href="#" title="Удалить этот термин"><img src="templates/images/del_q.png" /></a></td> </tr></table> <a class="add_course_button userpanel_link north menu_class" href="#" title="Добавить поле для ещё одного термина">Добавить термин</a> Суть состоит в следующем: При нажатии на ссылку: <a class="add_course_button userpanel_link north menu_class" href="#" title="Добавить поле для ещё одного термина">Добавить термин</a> должна добавляться в форму ещё одна таблица, такого вида: <table><tr> <td><input type="text" name="term_3" size="30" placeholder="Термин" /></td> <td><img src="templates/images/right_uk.png" /></td> <td><input type="text" name="explan_3" size="100" placeholder="Определение" /></td> <td><a class="admin_quest_button north" href="#" title="Удалить этот термин"><img src="templates/images/del_q.png" /></a></td> </tr></table> Имя полей в добавляемой таблице должны быть уникальными и продолжаться в том же порядке 4,5,6..7..n. Так же, желательно было бы реализовать удаление добавленного элемента (таблицы с полями), вот этой кнопкой: <a class="admin_quest_button north" href="#" title="Удалить этот термин"><img src="templates/images/del_q.png" /></a> Я очень плохо разбираюсь в JS. Самому мне это не по силам, если у кого-либо есть время на решение моей проблемы, буду максимально признателен!!! Заранее спасибо!!! |
Зачем вам тег А, если в него вставляется картинка, по которой можно также щелкнуть как и по тегу А? Вообще зачем ради щелчка использовать тег А?
Если таблицы в форме, то задача добавить/удалить не сложна (с учетом выкинуть ссылки) и вкратце суть такая:
$(function() {
$('form').find('img.north, span').click(function(e) {
if(e.target.tagName=='SPAN') {
var t = $(this.parentNode).find('table:last');
t.after(t.clone())
} else $(this).closest('table').remove();
})
});
<form>
<table><tr>
<td><input type="text" name="term_3" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="explan_3" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr></table>
<span class="add_course_button userpanel_link north menu_class" title="Добавить поле для ещё одного термина">Добавить термин</span>
</form>
Только вопрос - ну к примеру по примеру добавить следующую нумерацию, это понятно. Но если при элементах 1, 2, 3 удалить элемент 2, то какая нумерация должна быть у добавляемого - 4 или же при удалении 2, нужно элементу 3 сменить нумерацию на 2, а добавляемый будет 3? |
Цитата:
|
Обработчик POST запроса будет принимать данные по порядку
В таком случае выгоднее выбросить эту нумерацию из имен и использовать индексы:
<table><tr>
<td><input type="text" name="term[]" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="explan[]" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr></table>
На сервере будете получать два массива значений term и explan, и на клиенте не надо париться с нумерацией, а код мной показанный это все что нужно вам. |
Чего-то не работает... сначала работало добавление полей, а удаление нет, теперь же, каким-то таинственным образом, не работает не добавление не удаление. Вот код:
<script>
$(function() {
$('form').find('img.north, span').click(function(e) {
if(e.target.tagName=='SPAN') {
var t = $(this.parentNode).find('table:last');
t.after(t.clone())
} else $(this).closest('table').remove();
})
});
</script>
<form action="?do=create_lesson&course_id=[COURSE_ID]" method="post">
<table width="100%"><tr>
<td width="25px"><img src="templates/images/lesson_title.png" /></td><td><input name="lesson_title" type="text" class="title_lesson" placeholder="Название глоссария" /></td>
</tr></table>
<div align="center">
<table><tr>
<td><input type="text" name="term[]" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="explan[]" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr></table>
<span class="add_course_button userpanel_link north menu_class" title="Добавить поле для ещё одного термина">Добавить термин</span>
</div>
<center><button type="submit" class="auth">Добавить глоссарий</button></center>
</form>
И ещё, по поводу массивов. У меня этот код находится в html файле, который используется движком под шаблон, соответственно, здесь только html. Элементы PHP в этом коде не допустимы... =( |
$(function() {
$('form').on('click', 'img.north, span', function(e) {
if(e.target.tagName=='SPAN') {
var t = $(this.parentNode).find('table:last');
t.after(t.clone())
} else $(this).closest('table').remove();
})
});
Потому как динамически добавляются. Но не верно будет в том случае, если есть одна таблица и ее удалить. То есть, надо либо запрещать удаление таблицы, если она одна, либо переносить кнопку "Добавить термин" в форму, а добавление это не метод .after(), а .append() в родительский DIV. |
Ничего не понял.... Попытался вставить ваш новый скрипт к себе, н овсе так же не работает, можете поправить мой код?
<script>
$(function() {
$('form').on('click', 'img.north, span', function(e) {
if(e.target.tagName=='SPAN') {
var t = $(this.parentNode).find('table:last');
t.after(t.clone())
} else $(this).closest('table').remove();
})
});
</script>
<form action="?do=create_lesson&course_id=[COURSE_ID]" method="post">
<table width="100%"><tr>
<td width="25px"><img src="templates/images/lesson_title.png" /></td><td><input name="lesson_title" type="text" class="title_lesson" placeholder="Название глоссария" /></td>
</tr></table>
<div align="center">
<table><tr>
<td><input type="text" name="1" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="1" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr></table>
<span class="add_course_button userpanel_link north menu_class" title="Добавить поле для ещё одного термина">Добавить термин</span>
</div>
<center><button type="submit" class="auth">Добавить глоссарий</button></center>
</form>
|
А что именно не работает? У меня все работает, html ваш, один в один (хотя ой как плохо использовать таблицы ради оформления), если только не учитывать мои последние замечания, а их придется учесть, хотите вы этого или нет.
В общем по логике, должно быть так:
$('form').on('click', 'img.north, span', function(e) {
var t = $(this).closest('div').find('table');
if(e.target.tagName=='SPAN') $(this).before(t.eq(0).clone());
else if(t.length > 1) $(this).closest('table').remove();
})
а не "удаляй, не хочу". |
<script>
$(function() {
$('form').find('img.north, span').click(function(e) {
if(e.target.tagName=='SPAN') {
var t = $(this.parentNode).find('table:last');
t.after(t.clone())
} else $(this).closest('table').remove();
})
});
</script>
<form action="?do=create_lesson&course_id=[COURSE_ID]" method="post">
<table width="100%"><tr>
<td width="25px"><img src="templates/images/lesson_title.png" /></td><td><input name="lesson_title" type="text" class="title_lesson" placeholder="Название глоссария" /></td>
</tr></table>
<div align="center">
<table><tr>
<td><input type="text" name="1" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="1" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr></table>
<span class="add_course_button userpanel_link north menu_class" title="Добавить поле для ещё одного термина">Добавить термин</span>
</div>
<center><button type="submit" class="auth">Добавить глоссарий</button></center>
</form>
Вот с таким кодом работает добавление, удаление не работает, с Вашей функцией:
$('form').on('click', 'img.north, span', function(e) {
var t = $(this).closest('div').find('table');
if(e.target.tagName=='SPAN') $(this).before(t.eq(0).clone());
else if(t.length > 1) $(this).closest('table').remove();
})
Не работает ничего совсем! Можете помочь решить вопрос с удалением, а так же нумерацией (я подумал и решил, что нумерация может остаться непоследовательной после удаления какого-либо элемента, это не составит проблемы). Извиняюсь за назойливость, но в JS я совсем ничего не понимаю... |
А что исправлять? Все ваше и работает:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
img, span {
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('form').on('click', 'img.north, span', function(e) {
var t = $(this).closest('div').find('table');
if(e.target.tagName=='SPAN') t.last().after(t.eq(0).clone());
else if(t.length > 1) $(this).closest('table').remove();
})
});
</script>
</head>
<body>
<form action="?do=create_lesson&course_id=[COURSE_ID]" method="post">
<table width="100%"><tr>
<td width="25px"><img src="templates/images/lesson_title.png" /></td><td><input name="lesson_title" type="text" class="title_lesson" placeholder="Название глоссария" /></td>
</tr></table>
<div align="center">
<table>
<tr>
<td><input type="text" name="term[]" size="30" placeholder="Термин" /></td>
<td><img src="templates/images/right_uk.png" /></td>
<td><input type="text" name="explan[]" size="100" placeholder="Определение" /></td>
<td><img class="admin_quest_button north" title="Удалить этот термин" src="templates/images/del_q.png" /></td>
</tr>
</table>
<span class="add_course_button userpanel_link north menu_class" title="Добавить поле для ещё одного термина">Добавить термин</span>
</div>
<center><button type="submit" class="auth">Добавить глоссарий</button></center>
</form>
</body>
</html>
Открыть отладчик в браузере, есть ли ошибки? Что тут может не работать... я подумал и решил, что нумерация может остаться непоследовательной после удаления какого-либо элемента, это не составит проблемы Что за ерунда, что значит не последовательной? Если у вас будет три таблицы, то получите на сервере два массива каждый с тремя элементами, индексы элементов массива term будут соответствовать индексам элементов массива explan. Отправьте форму и выполните элементарный print_r($_POST), чтобы убедиться, что думаете вы не верном направлении. Кстати, [COURSE_ID] - это что такое? Из любопытства ) |
| Часовой пояс GMT +3, время: 17:21. |