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

Существует множество способов и технологий позволяющих реализовать динамическое добавление полей на странице (без перезагрузки). Т.е. пользователь просто жмет кнопку «добавить поле» и новое поле для ввода каких либо данных добавляется к форме.example[1]

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


Комментарии: