Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Размножения полей формы на сайте

Доброго времени суток, уважаемые читатели. В некоторых ситуациях требуется через форму на сайте добавить несколько идентичных данных, например, заполнить таблицу в базе данных фамилиями сотрудников фирмы, это не суть.  Добавлять через одно поле и каждый раз отправлять данные на сервер согласитесь довольно скучное занятие. Поэтому в данном уроке мы будем учиться размножать поля формы и делать их столько, сколько нам нужно, а в этом нам поможет jQuery. Взгляните на пример и сразу поймете, о чем я.

Пример

Поскольку делать это мы будем при помощи jQuery, то нужно подключить данную библиотеку.

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

Теперь создадим саму форму с кнопкой добавления нового поля и кнопкой отправки данных:

<form action="add.php" method="post">
       <table
id="table_container">
             <tr>
                    <td
width="100px" colspan="2"><strong>Название</strong></td>
             </tr>
        </table>
        <br/>
<input
type="button" value="Добавить поле" id="add" onclick="return add_new_image();">
<input
type="submit" value="Отправить">
</form>

Как вы заметили для кнопки Добавить поле мы написали параметр onclick="return add_new_image();". Это означает что при нажатии на нее у нас должна выполняться функция, которая и будет добавлять дополнительные поля. Данная функция на JavaScript будет выглядеть так:

<script type="text/javascript">
var total = 0;
function add_new_image(){
   total++;
   $
('<tr>')
   .attr('id','tr_image_'+total)
   .css({lineHeight:'20px'})
   .append (
       $('<td>')
       .attr('id','td_title_'+total)
       .css({paddingRight:'5px',width:'200px'})
       .append(
           $('<input type="text" />')
           .css({width:'200px'})
           .attr('id','input_title_'+total)
           .attr('name','input_title_'+total)
       )                             
                              
    )
    .append(
        $('<td>')
        .css({width:'60px'})
        .append(
           $('<span id="progress_'+total+'" class="padding5px"><a href="#" onclick="$(\'#tr_image_'+total+'\').remove();" class="ico_delete"><img src="delete.png" alt="del" border="0"></a></span>')
         )
     )
     .appendTo('#table_container');                
}
$(document).ready(function() {
    add_new_image();
});
</script>

Давайте разберем, что здесь происходит. Поскольку при добавлении нового поля нам нужно чтобы имена у них были разные, чтобы иметь возможность обработать их на сервере. Для этого создана переменная total, которая будет при клике увеличиваться на 1 и добавляться к имени поля input. Затем мы в таблицу, находящуюся в форме мы добавляем новую строку <tr> и применяем к нему атрибут id='tr_image_'+total  и стиль lineHeight:'20px'

<tr id="tr_image_1" style="line-height: 20px;"></tr>

После этого мы добавляем первый столбец <td>, к которому так же применяем атрибут id='td_title_'+total и стиль paddingRight:'5px',width:'200px'

<td id="td_title_1" style="padding-right: 5px; width: 200px;"></td>

В этот столбец мы добавляем поле input и снова применяем атрибуты id и name, а также стили

<input type="text" style="width: 200px;" id="input_title_1" name="input_title_1">

Следующим действием мы добавляем второй столбец, в котором у нас будет кнопка для удаления поля. Данный код уже должен работать и добавлять поля.

Теперь нужно разобраться, как обрабатывать все эти данные. В форме у нас прописан обработчик add.php его и будем редактировать. При добавлении нового поля, как мы знаем, у нас возникают новые переменные input_title_1, input_title_2 и т.д. Казалось бы все просто, мы просто сосчитаем сколько элементов в массиве $_POST и используя цикл переберем все значения.

$n = count($_POST);
for($i=1; $i <= $n; $i++){
     echo $_POST["input_title_".$i]."<br>";
}

Но есть одно «но» о котором я сейчас расскажу. Допустим вы добавили четыре поля у которых соответственно будут имена input_title_1, input_title_2, input_title_3, input_title_4. Но вдруг вы решили удалить одно поле, например третье по счету. В результате у нас остались input_title_1, input_title_2, input_title_4. В обработчике мы сосчитаем элементы массива у нас их получится 3 и запустим цикл от 1 до 3. Получится так, что мы переберем input_title_1, input_title_2, input_title_3, а input_title_4 останется без внимания. Чтобы избежать этой ситуации мы немного изменим код:

$n = count($_POST);
$key = array_keys($_POST);
for($i=0; $i < $n; $i++){
     echo $_POST[$key[$i]]."<br>";
}

Здесь как и в предыдущем случае мы сосчитали сколько у нас элементов в массиве, а так же вытащили все названия ключей из него и поместили в новый массив $key. В этом массиве уже в качестве ключей служат цифры начиная с 0:

$key[0] => input_title_1
$key[1] => input_title_2
$key[2] => input_title_4

Теперь, зная все значения ключей, мы можем их перебрать при помощи цикла в исходном массиве, тем самым не «упустив» переменные. В данном примере просто выводятся все значения, но с ними вы можете делать все что угодно. Чтобы сделать два поля то в JavaScript нужно добавить вот такой код сразу после того как мы закончили с добавлением первого столбца:

.append(
   $('<td>')
   .attr('id','td_ name_'+total)
   .css({paddingRight:'5px',width:'200px'})
   .append(
       $('<input type="text" />')
       .css({width:'200px'})
       .attr('id','name_'+total)
       .attr('name','name_'+total)
    )                             
)

Только не забывайте менять параметры id и name, иначе у вас получится несколько полей с одинаковым именем.

Автор: Евгений Бочкарев Урок добавлен: 1 Февраля 2011 в 16:20 Просмотров: 30870

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (4)

#5 Дизи 02-02-2012 в 15:30
Делаю форму для импорта прайса в базу данных. Спасибо тебе друг ты очень помог, а то в яве не бум бум а так аж интерес появился
#6 Димдим 09-02-2012 в 09:32
Идеально! Находил много мусора, а здесь всё чётко!
#7 Димон 17-02-2012 в 14:27
Спасибо. Очень помог решить часть поставленной задачи.
#8 Vitaly 14-06-2012 в 14:48
хорошо изложено.
А тут я нашел еще похожее решение в связке с php/html/css:
http://ztview.net - как цельное приложение получается
#9 Антон 27-12-2012 в 01:32
Я тут нашёл хороший пример подгрузки контента без перезагрузки http://webersoft.ru/podgruzka-bez-perezagruzki/
#10 Dushanbe 03-02-2013 в 16:28
Спасибо, реализовал функцию у себя на сайте
</noindex>http://vdushanbe.ru<noindex>
#11 Виталий 03-04-2013 в 01:16
Пример очень хороший. Как сделать чтобы кнопка ДОБАВИТЬ ПОЛЕ появлялась рядом с каждой созданной формой и при нажатии добавляла форму не в самый низ списка, а после себя?
#12 Sergey 18-04-2013 в 16:41
А почему input вкладывается в таблицу? Так действительно необходимо или можно например просто добавлять новый input к форм?
#13 илья 02-06-2013 в 20:31
а можно ли таким же образом добавлять, элемнты списка?

#14 Слава 10-03-2016 в 21:34
Можно ли сделать таким образом добавление строки полей ввода, а не одного поля?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки