Добавить в избранное

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

Дата: 2011-12-22

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

Данный урок подготовлен для Вас саитом tiwebmaster.ru 

Просмотров: 3546

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


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

Здравствуйте! уважаемые читатели Бывают ситуации когда нужно добавить на сайте несколько данных по одному критерию, можно несколько раз добавлять данные но это не проффесионально поэтому я предлогаю материал по добавлению полей при помощи jQuery.


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

jQuery вдохнул новую жизнь в JavaScript. В данном уроке приводится 10 вставок кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб приложений.


Видео уроки по php,jquery,ajax,css,html,сео