На главную Статьи Функции

Добавление элементов формы с помощью jQuery




Есть у меня одна статья, посвященная тому, как добавить элемент в html форму с помощью PHP. Основной недостаток описанного в ней подхода – все это работает с перезагрузкой страницу. Представьте, что надо быстро добавить 5 или 10 элементов. Конечно, десять раз нажимать на кнопку пользователю не понравится. В этой статье я расскажу как быстро и без перезагрузки страницы добавлять и удалять поля из html формы с помощью jQuery.
Начнем с постановки задачи. У нас есть  некая html форма. В ней есть различные поля. Чаще всего с задачей добавления поля в форму сталкиваешься при загрузке изображений на сервер (например изображения товаров в интернет-магазине). Сначала создадим саму форму:
<fomr action=”post” enctype="multipart/form-data" action=””>
<div id="file_fields">
<input type=”file” name=”image[]” />
</div>
<p style=”cursor:pointer” onclick=”add_field()”>добавить</p>
<input type=”submit” value=”Загрузить” />
</form>
как видите, поле для загрузки файла вынесено в отдельный слой div, зачем это сделано будет понятно ниже. Замечу сразу, я не претендую на гуру в области javascript  и тем более jQuery, и может быть мой вариант не самый лучший, но, по крайней мере, до него я дошел сам и он работает. Следующим шагом нужно создать javascript функцию add_field(), которая собственно и будет добавлять поле в форму:
function add_field() {
var form_field='<p style="cursor:pointer"><input type="file" name="image[]" /><span onclick="$($(this).parent()).remove()">удалить</span></p>'
$('#file_fields').append(form_field);
}
Что же она делает. Первой строкой создается переменная form_field, которая содержит код html элемента, который нужно добавить. Ниже я объясню весь код более детально. Ну а дальше, методом .append() jQuery мы добавляем созданный элемент в конец слоя с идентификатором file_fields.
Теперь подробнее об элементе, который мы добавляем к форме. Как видите, мы добавляем параграф, который содержит в себе поле для добавления файла, а также элемент span, в атрибуте onclick которого находится некая функция jQuery. Объясню что значит каждый из ее элементов:

  1. $(this).parent() – метод .parent() возвращает родительский элемент (для элемента span родителем является параграф, который мы добавляем). Ключевое слово this указывает на текущий html элемент. Соответственно такая запись возвращает указатель (не знаю как правильно выразиться) добавляемого параграфа.
  2. .remove() – этот метод jQuery удаляет выбранный элемент. Т.к. в аргументе стоит указатель на текущий параграф, то по клику на элемент span параграф будет удален. Получилось немного сумбурно, но это не главное.

Вот в принципе и все, ничего сложного в этом примере нет. Главное, не забудьте подкючить jQuery, а то работать не будет.



© 2010-2024 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь