Автоматическое добавление полей в форму

[DVMade]

Здравствуйте. Для начала, хочу сказать огромное спасибо ребятам, за оперативное решение предыдущей проблемы! Но... теперь есть кое-чего нового.
В общем, вот код:

<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. Самому мне это не по силам, если у кого-либо есть время на решение моей проблемы, буду максимально признателен!!! Заранее спасибо!!!

[laimas]

Зачем вам тег А, если в него вставляется картинка, по которой можно также щелкнуть как и по тегу А? Вообще зачем ради щелчка использовать тег А?

Если таблицы в форме, то задача добавить/удалить не сложна (с учетом выкинуть ссылки) и вкратце суть такая:

$(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?

[DVMade]

Только вопрос - ну к примеру по примеру добавить следующую нумерацию, это понятно. Но если при элементах 1, 2, 3 удалить элемент 2, то какая нумерация должна быть у добавляемого - 4 или же при удалении 2, нужно элементу 3 сменить нумерацию на 2, а добавляемый будет 3?

Второй вариант. Обработчик POST запроса будет принимать данные по порядку, соответственно, при удалении одного из элементов, скорее всего, придётся изменять нумерацию всех, что бы она была так же по порядку...

[laimas]

Обработчик 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, и на клиенте не надо париться с нумерацией, а код мной показанный это все что нужно вам.

[DVMade]

Чего-то не работает... сначала работало добавление полей, а удаление нет, теперь же, каким-то таинственным образом, не работает не добавление не удаление. Вот код:

<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 в этом коде не допустимы... =(

[laimas]

$(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.

[DVMade]

Ничего не понял.... Попытался вставить ваш новый скрипт к себе, н овсе так же не работает, можете поправить мой код?

<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>

[laimas]

А что именно не работает? У меня все работает, 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();
})

а не "удаляй, не хочу".

[DVMade]

<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 я совсем ничего не понимаю...

[laimas]

А что исправлять? Все ваше и работает:

<!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] - это что такое? Из любопытства )