Получение всех значений формы

Библиотека jQuery позволяет получить все данные формы за один раз и подготовить их для передачи на сервер. Для этого предназначены следующие методы:

  • serialize() — получает все данные формы и составляет запрос, который можно отправить с помощью технологии AJAX. Метод позволяет обработать данные не только всей формы, но и отдельных элементов:
<input type="text" name="txt1" id="txt1" value="Текст"
       class="form-control mb-2">
<button type="button" class="btn btn-primary" id="btn1">
   Получить значение</button>
$('#btn1').click( function() {
   console.log( $('#txt1').serialize() );
});

Результат:

txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82
  • serializeArray() — возвращает массив всех данных формы. Элементы массива представляют собой объект с двумя свойствами:
  • name — название поля в форме;
  • value — значение поля.

Метод позволяет обработать данные не только всей формы, но и отдельных элементов:

<input type="text" name="txt1" id="txt1" value="Текст"
       class="form-control mb-2">
<button type="button" class="btn btn-primary mb-2" id="btn1">
   Получить значение</button>
<div id="log"></div>
$('#btn1').click( function() {
   var arr = $('#txt1').serializeArray();
   $('#log').html('Поле: ' + arr[0].name +
                  '<br>Значение: ' + arr[0].value);
});

Результат:

Поле: txt1
Значение: Текст
  • $.param(<Объект>[, true]) — позволяет преобразовать объект в строку, предназначенную к отправке на сервер. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Не требует предварительного нахождения коллекции элементов:
<input type="text" name="txt1" id="txt1" value="Текст"
       class="form-control mb-2">
<button type="button" class="btn btn-primary mb-2" id="btn1">
   Получить значение</button>
<div id="log"></div>
$('#btn1').click( function() {
   $('#log').text( $.param( $('#txt1').serializeArray() ) );
});

Результат:

txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82

В качестве параметра можно передать коллекцию элементов. Получим значения всех текстовых полей:

<input type="text" name="txt1" id="txt1" value="1"
       class="form-control mb-2">
<input type="text" name="txt2" id="txt2" value="2"
       class="form-control mb-2">
<button type="button" class="btn btn-primary mb-2" id="btn1">
   Получить значение</button>
<div id="log"></div>
$('#btn1').click( function() {
   $('#log').text( $.param( $('input[type="text"]') ) );
});

Результат:

txt1=1&txt2=2

Функция позволяет обработать не только данные формы, но и обычные объекты:

var obj = { var1: 'Текст', var2: 5 };
console.log( $.param(obj) );

Результат:

var1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&var2=5

Если во втором параметре задано значение false или второй параметр не указан, то будут обрабатываться вложенные объекты и массивы. Результат обработки массива будет соответствовать правилам получения массива в PHP (после названия параметра указываются квадратные скобки):

var obj = { a: [1, 2, 3], b: { c: 4 } };
console.log( $.param(obj) );
console.log( decodeURIComponent( $.param(obj) ) );

Результат:

a%5B%5D=1&a%5B%5D=2&a%5B%5D=3&b%5Bc%5D=4
a[]=1&a[]=2&a[]=3&b[c]=4

Если во втором параметре указать значение true, то квадратные скобки добавляться не будут, а для вложенных объектов будет выведено значение [object Object]:

var obj = { a: [1, 2, 3], b: { c: 4 } };
console.log( $.param(obj, true) );
console.log( decodeURIComponent( $.param(obj, true) ) );

Результат:

a=1&a=2&a=3&b=%5Bobject%20Object%5D
a=1&a=2&a=3&b=[object Object]
  • Пример обработки данных всей формы разными методами приведен в листинге 1.27.

Листинг 1.27. Методы serialize(), serializeArray() и $.param()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Методы serialize(), serializeArray() и $.param()</title>
</head>
<body>
<div class="container my-3">
  <form action="#" method="GET" id="frm1">
    <div class="form-group">
       <input type="text" class="form-control"
              name="txt1" id="txt1" value="Текст">
       <input type="hidden" name="hdn1" id="hdn1" value="1">
    </div>
    <div class="form-group form-check">
       <input type="checkbox" class="form-check-input"
              name="check1" id="check1" value="yes">
       <label class="form-check-label" for="check1">Текст</label>
    </div>
    <p>Укажите ваш пол:</p>
    <div class="form-group">
       <div class="form-check">
          <input type="radio" name="sex" id="radio1" value="male"
                 class="form-check-input" checked>
          <label class="form-check-label" for="radio1">Мужской</label>
       </div>
       <div class="form-check">
          <input type="radio" name="sex" id="radio2" value="female"
                 class="form-check-input">
          <label class="form-check-label" for="radio2">Женский</label>
       </div>
    </div>
    <div class="form-group">
       <div class="form-check">
          <input type="checkbox" class="form-check-input"
                 name="c[]" id="c1" value="1">
          <label class="form-check-label" for="c1">Пункт 1</label>
       </div>
       <div class="form-check">
          <input type="checkbox" class="form-check-input"
                 name="c[]" id="c2" value="2">
          <label class="form-check-label" for="c2">Пункт 2</label>
       </div>
       <div class="form-check">
          <input type="checkbox" class="form-check-input"
                 name="c[]" id="c3" value="3">
          <label class="form-check-label" for="c3">Пункт 3</label>
       </div>
    </div>
    <button type="button" class="btn btn-primary mb-3" id="btn1">
       Получить значения</button>
  </form>
  
  <p><b>serialize():</b></p>
  <div id="log1" class="mb-3"></div>
  <p><b>serializeArray():</b></p>
  <div id="log2" class="mb-3"></div>
  <p><b>$.param():</b></p>
  <div id="log3"></div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      $('#log1').text( $('#frm1').serialize() );
      var arr = $('#frm1').serializeArray();
      var txt = '';
      for (var i = 0, count = arr.length; i < count; i++) {
         txt += i + ' =&gt; ' + arr[i].name + ' = ';
         txt += arr[i].value + '<br>';
      }
      $('#log2').html(txt);
      $('#log3').text( $.param(arr) );
   });
});
</script>
</body>
</html>

Результат при значениях по умолчанию:

serialize():
txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&hdn1=1&sex=male

serializeArray():
0 => txt1 = Текст
1 => hdn1 = 1
2 => sex = male

$.param():
txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&hdn1=1&sex=male

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов