Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Получение всех значений формы
Библиотека 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 + ' => ' + 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
Реквизиты
ЮMoney: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов