jQuery - Получить значение полей формы

Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.

jQuery – Получения данных формы с помощью метода each

Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.

// создадим пустой объект
var $data = {};
// переберём все элементы input, textarea и select формы с id="myForm "
$('#myForm').find ('input, textearea, select').each(function() {
  // добавим новое свойство к объекту $data
  // имя свойства – значение атрибута name элемента
  // значение свойства – значение свойство value элемента
  $data[this.name] = $(this).val();
});

В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов (name и value) элементов.

При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.

Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery ajax.

// AJAX-запрос, который будет отправлен на сервер:
//   по адресу: process.php
//   методом POST
//   содержащий данные $data 
// success - это функция, которая будет вызвана после получения ответа от сервера
//   (сам ответ доступен посредством аргумента result)
$.ajax({
  url: 'process.php',
  type: 'post',
  data: $data,
  success: function(result) {
    // действия при получения ответа (result) от сервера
  }
});

jQuery - Сериализация формы

В jQuery для получения всех полей формы input, textarea и select можно использовать следующие методы:

  • serialize() - предназначен для сериализации данных формы в строку запроса.
    имяПоля1=значение1&имяПоля2=значение2...
  • serializeArray() - выполняет кодирование элементов формы в массив, состоящий из имен и значений.
    [
      { name : "имяПоля1",
        value : "значение1" },
      { name : "имяПоля2",
        value : "значение2" },
      ...
    ]

Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.

Например, рассмотрим, как можно перебрать массив, который вернул метод serializeArray, с помощью функции each:

// создание массива объектов из данных формы
var data = $('#myForm').serializeArray();
// переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль
$.each(data,function(){
  console.log(this.name+'='+this.value);
});

Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, то в этом случае неважно, какой из этих методов использовать. Т.к. данный метод может принимать данные, закодированные как с помощью метода serialize, так и посредством serializeArray.

Для того чтобы элемент был сериализован методом serialize или serializeArray, он должен отвечать критериям "successful controls", указанным в спецификации HTML. Первое условие "successful controls" – это наличие у элемента атрибута name. Второе, если форма отправлена не с помощью кнопки submit, то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье, значения из элементов checkboxes и radio кнопок (input с type "radio" или "checkbox") будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое, элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь false в качестве значение свойства disabled (другими словами, у элемента обязан отсутствовать атрибут disabled).

Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.

Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize или serializeArray. Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax. Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result.

<!-- Элемент для вывода результата -->
<div id="form_result"></div>
<hr>
<!-- HTML-форма -->
<form id="orderCallBack" action="process.php">
  Ваше имя: <input type="text" name="name" value=""><br>
  Ваш телефон: <input type="text" name="phone" value=""><br>
  Ваше сообщение:<br> <textarea name="message"></textarea><br>
  <input type="submit" name="submit1" value="Заказать звонок" data-method="serialize"><br>
  <input type="submit" name="submit2" value="Заказать звонок" data-method="serializeArray">
</form>
<!-- Сценарий для обработки формы -->
<script>
$(function() {
  // при нажатию на кнопку с типом submit
  $('#orderCallBack input[type="submit"]').click(function(e) {
    // отменяем стандартное поведение браузера
    e.preventDefault();
    // переменная, которая будет содержать данные серилизации
    var $data;
    // в зависимости от того какую нажали кнопку, выполняем
    // серилизацию тем или иным способом
    if ($(this).attr('data-method') == 'serialize') {
      $data = $(this).parent('form').serialize();
    } else {
      $data = $(this).parent('form').serializeArray();
    }
    // для отправки данных будем использовать технологию ajax
    //   url - адрес скрипта, с помощью которого будем обрабатывать форму на сервере
    //   type - метод отправки запроса (POST)
    //   data - данные, которые необходимо передать серверу
    //   success - функция, которая будет вызвана, когда ответ прийдёт с сервера
    $.ajax({
      url: $(this).parent('form').attr('action'),
      type: 'post',
      data: $data,
      success: function(result) {
        $('#form_result').html(result);
      }
    })
  });
});
</script>

PHP код, обрабатывающий ajax запрос на сервере:

<?php
// переменная для сохранения результата
$data='';
// переберём массив $_POST
foreach ($_POST as $key => $value) {
  // добавим в переменную $data имя и значение ключа
  $data .= $key . ' = ' . $value . '
'; } // выведим результат echo $data; ?>

Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).

Сериализация формы с помощью методов jQuery serialize и serializeArray
Сериализация формы с помощью методов jQuery serialize и serializeArray


   JavaScript и jQuery 0    373 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.