Blog. Just Blog

Как отправить из формы HTML только часть данных

Версия для печати Добавить в Избранное Отправить на E-Mail 04.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Формы - один из основных способов взаимодействия сайта и пользователя, без которых невозможно представить ни один современный сайт. Методы работы с формами стандартные, никаких сложностей в реализации вызывать не должны. В некоторых случаях требуется отправить только часть полей из большой формы. Типичный пример - настройки форума, когда можно сохранить какую-то одну из всех открытых категорий, а можно сохранить все сразу. Один из вариантов решения заключается в том, что можно каким-нибудь образом, например, уникальным индексом, пометить кнопку сабмита нужной группы.
Code (HTML) : Убрать нумерацию
  1. <form action="process.php" method="post">
  2.  
  3. <input type="text" name="text1" value="text1">
  4. <input type="checkbox" name="box1" value="box1">
  5. <input type="submit" name="submit1" value="Отправить 1 блок">
  6.  
  7. <input type="text" name="text2" value="text2">
  8. <input type="checkbox" name="box2" value="box2">
  9. <input type="submit" name="submit2" value="Отправить 2 блок">
  10.  
  11. <input type="submit" name="all" value="Отправить все">
  12. </form>
В этом случае обработка и сортировка поступившей информации ложится целиком на сторону сервера. Сперва определяется, какой из сабмитов был нажат, затем на основании этой информации из всех данных выбираются нужные. Метод надежный, работает во всех случаях, даже если у пользователя в браузере отключены скрипты. Недостаток способа в том, что передаются все поля из формы, а не только нужные. Вложенные формы стандартом HTML не допускаются и, соответственно, корректно не обрабатываются.

Второй способ, с использованием JavaScript, заключается в том, что из формы берутся нужные поля, затем динамически формируется новая форма, и на сервер отправляется уже она. Для этого придется сделать несколько вспомогательных действий. Первая - изменится разметка страницы.
Code (HTML) : Убрать нумерацию
  1. <div id="wrapper0">
  2.   <div id="wrapper1">
  3.   Текст 1: <input type="text" name="text1">
  4.   <input type="checkbox" name="chk1" value="1">
  5.   <input type="button" value="Сохранить" onclick="ds('wrapper1');">
  6.   </div>
  7.  
  8.   <div id="wrapper2">
  9.   Текст 2: <input type="text" name="text2">
  10.   <input type="checkbox" name="chk2" value="2">
  11.   <input type="button" value="Сохранить" onclick="ds('wrapper2');">
  12.   </div>
  13.  
  14.   <div id="wrapper3">
  15.   Текст 3: <input type="text" name="text3">
  16.   <input type="checkbox" name="chk3" value="3">
  17.   <input type="button" value="Сохранить" onclick="ds('wrapper3');">
  18.   </div>
  19.  
  20.   <div>Глобально: <input type="text" name="global">
  21.     <select name="sel">
  22.     <option value="1">1</option>
  23.     <option value="2">2</option>
  24.     <option value="3">3</option>
  25.     <option value="4">4</option>
  26.     </select>
  27.   </div>
  28.  
  29.   <input type="button" value="Сохранить все" onclick="ds('wrapper0');">
  30. </div>
Обратите внимание, что вместо тега form используются блоки div. Это позволяет создать на странице что-то вроде вложенных форм. Я сразу добавил в код обработчики сабмитов, функции будут описаны ниже.

Вспомогательный обработчик динамически создает новую форму, заполняет ее копиями всех значений из выбранных полей и отправляет на сервер.
Code (JavaScript) : Убрать нумерацию
  1. //--------------------------------------------------------------------
  2. // Создать временную форму и перенести в нее все элементы
  3. //--------------------------------------------------------------------
  4. function ds(f) {
  5.   var e=document.getElementById(f);
  6.   if (!e) return false;
  7.  
  8.   // Создать временную форму
  9.   var tmp_form = document.createElement("form");
  10.   tmp_form.method='get';
  11.   tmp_form.action='process.php';   // Адрес скрипта-обработчика формы
  12.   tmp_form.style.display='none';
  13.   document.getElementsByTagName('body')[0].appendChild(tmp_form);
  14.  
  15.   // Перенести в нее все элементы
  16.   cf(e,tmp_form);
  17.  
  18.   // Отправить созданную форму
  19.   tmp_form.submit();
  20. }
Основной обработчик рекурсивно обходит нужную нам псевдо-форму, извлекает из нее значения всех чекбоксов, текстовых полей, селектов, радиокнопок, скрытых полей и т.д., и записывает их в новую форму. Кнопки очистки формы и сабмита пропускаются, также пропускаются все поля, не имеющие атрибута name.
Code (JavaScript) : Убрать нумерацию
  1. //--------------------------------------------------------------------
  2. // Перенести значения полей в форму
  3. //--------------------------------------------------------------------
  4. function cf(e,f) {
  5.   for (var i=0; i<e.childNodes.length; i++) {
  6.     var el = e.childNodes[i];
  7.     var elName = el.nodeName.toLowerCase();
  8.     // Обработка input
  9.     if (elName=='input' && el.name!='') {
  10.       var type = el.type.toLowerCase();
  11.       switch (type) {
  12.         // Текстовое поле
  13.         case 'text': {
  14.           var tmp_el = document.createElement("input");
  15.           tmp_el.name=el.name;
  16.           tmp_el.type='hidden';
  17.           tmp_el.value=el.value;
  18.           f.appendChild(tmp_el);
  19.           break;
  20.         }
  21.         // Флажок checkbox
  22.         case 'checkbox': {
  23.           if (el.checked) {
  24.             var tmp_el = document.createElement("input");
  25.             tmp_el.name=el.name;
  26.             tmp_el.type='checkbox';
  27.             tmp_el.value=el.value;
  28.             f.appendChild(tmp_el);
  29.             tmp_el.checked=true;
  30.           }
  31.           break;
  32.         }
  33.         // Флажок radio
  34.         case 'radio': {
  35.           if (el.checked) {
  36.             var tmp_el = document.createElement("input");
  37.             tmp_el.name=el.name;
  38.             tmp_el.type='radio';
  39.             tmp_el.value=el.value;
  40.             f.appendChild(tmp_el);
  41.             tmp_el.checked=true;
  42.           }
  43.           break;
  44.         }
  45.         // Текстовое поле
  46.         case 'hidden': {
  47.           var tmp_el = document.createElement("input");
  48.           tmp_el.name=el.name;
  49.           tmp_el.type='hidden';
  50.           tmp_el.value=el.value;
  51.           f.appendChild(tmp_el);
  52.           break;
  53.         }
  54.         // Поле ввода пароля
  55.         case 'password': {
  56.           var tmp_el = document.createElement("input");
  57.           tmp_el.name=el.name;
  58.           tmp_el.type='hidden';
  59.           tmp_el.value=el.value;
  60.           f.appendChild(tmp_el);
  61.           break;
  62.         }
  63.         // Любые другие input'ы
  64.         default: {
  65.           break;
  66.         }
  67.       }
  68.     }
  69.     // Обработка textarea
  70.     else if (elName=='textarea' && el.name!='') {
  71.       var tmp_el = document.createElement("textarea");
  72.       tmp_el.name=el.name;
  73.       tmp_el.value=el.value;
  74.       f.appendChild(tmp_el);
  75.     }
  76.     // Обработка select
  77.     else if (elName=='select' && el.name!='') {
  78.       var tmp_el = document.createElement("input");
  79.       tmp_el.name=el.name;
  80.       tmp_el.type='hidden';
  81.       tmp_el.value=el.value;
  82.       f.appendChild(tmp_el);
  83.     }
  84.     else {
  85.       // Обработать вложенный тег (рекурсия)
  86.       cf(el,f);
  87.     }
  88.   }
  89. }
Немного не в тему, но приведенный выше скрипт с некоторыми модификациями у меня используется при отправке форм через AJAX. Также его можно использовать, когда надо получить значения полей формы для какой-нибудь обработки на стороне пользователя. Как всегда, главное понять принцип. Основные недостатки этого метода в том, что таким образом нельзя загружать файлы, и он не будет работать, если в браузере отключен JavaScript. Загрузку файлов, наверное, можно будет обойти не через копирование, а через перенос элемента из исходной формы в создаваемую временную форму. Это я пока не пробовал, подтвердить или опровергнуть не могу. Рабочий пример можно посмотреть на сайте.

Поделиться ссылкой ВКонтакте
Просмотров: 11472 | Комментариев: 4

Метки: JavaScript, HTML
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
vic (29.12.2011 в 15:33):
ipSlicer +5
Виктор (16.07.2011 в 13:13):
Спасибо ! То что нужно. А то например в профиле человек поменял всего лишь одно значение, а приходится передавать все.
ManHunter (08.11.2010 в 10:28):
ipSlicer, хороший способ, спасибо.
ipSlicer (08.11.2010 в 02:59):
Добавлю 3-й метод, которым обычно пользуюсь я. Он так же зависит от javascript, но основан на том, что ненужным для отправки полям при обходе я просто присваиваю индекс DISABLED препятствующий отправке значения поля.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (362), COM (41), CSS (42), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (52), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (29), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (317), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (77), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (50), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (130), полезные функции (42), прохождения (4), процессы (25), птица (21), путешествия (25), распаковка (22), реверсинг (52), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (10), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,328 раз
<< 2024 - ОКТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
День кадрового работника
Всемирный день борьбы с артритом
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0037 сек.) / Память: 4.5 Mb
Наверх