Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2015, 21:51
Интересующийся
Отправить личное сообщение для DVMade Посмотреть профиль Найти все сообщения от DVMade
 
Регистрация: 02.03.2015
Сообщений: 17

Автоматическое добавление полей в форму
Здравствуйте. Для начала, хочу сказать огромное спасибо ребятам, за оперативное решение предыдущей проблемы! Но... теперь есть кое-чего нового.
В общем, вот код:
<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. Самому мне это не по силам, если у кого-либо есть время на решение моей проблемы, буду максимально признателен!!! Заранее спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2015, 22:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

$(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?
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2015, 23:05
Интересующийся
Отправить личное сообщение для DVMade Посмотреть профиль Найти все сообщения от DVMade
 
Регистрация: 02.03.2015
Сообщений: 17

Сообщение от laimas Посмотреть сообщение
Только вопрос - ну к примеру по примеру добавить следующую нумерацию, это понятно. Но если при элементах 1, 2, 3 удалить элемент 2, то какая нумерация должна быть у добавляемого - 4 или же при удалении 2, нужно элементу 3 сменить нумерацию на 2, а добавляемый будет 3?
Второй вариант. Обработчик POST запроса будет принимать данные по порядку, соответственно, при удалении одного из элементов, скорее всего, придётся изменять нумерацию всех, что бы она была так же по порядку...
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2015, 23:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Последний раз редактировалось laimas, 05.03.2015 в 23:34.
Ответить с цитированием
  #5 (permalink)  
Старый 05.03.2015, 23:45
Интересующийся
Отправить личное сообщение для DVMade Посмотреть профиль Найти все сообщения от DVMade
 
Регистрация: 02.03.2015
Сообщений: 17

Чего-то не работает... сначала работало добавление полей, а удаление нет, теперь же, каким-то таинственным образом, не работает не добавление не удаление. Вот код:
<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 в этом коде не допустимы... =(

Последний раз редактировалось DVMade, 05.03.2015 в 23:51.
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2015, 00:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$(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.
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2015, 00:06
Интересующийся
Отправить личное сообщение для DVMade Посмотреть профиль Найти все сообщения от DVMade
 
Регистрация: 02.03.2015
Сообщений: 17

Ничего не понял.... Попытался вставить ваш новый скрипт к себе, н овсе так же не работает, можете поправить мой код?
<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>
Ответить с цитированием
  #8 (permalink)  
Старый 06.03.2015, 00:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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


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

Последний раз редактировалось laimas, 06.03.2015 в 03:27.
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2015, 10:59
Интересующийся
Отправить личное сообщение для DVMade Посмотреть профиль Найти все сообщения от DVMade
 
Регистрация: 02.03.2015
Сообщений: 17

<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 я совсем ничего не понимаю...
Ответить с цитированием
  #10 (permalink)  
Старый 06.03.2015, 11:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Последний раз редактировалось laimas, 06.03.2015 в 13:05.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическое добавление картинки в БД timedo Events/DOM/Window 0 26.04.2014 00:29
Добавление из нескольких полей в одно bohdantheone Общие вопросы Javascript 12 08.10.2013 13:32
Автоматическое заполнение полей после переадресации Anter AJAX и COMET 7 05.10.2012 11:15
Добавление и удаление полей в форму anoth3r Events/DOM/Window 1 11.09.2009 15:10
Добавление новых полей к форме. EZh Элементы интерфейса 7 14.06.2008 04:05