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

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

$("#btn1").click(function() {
   alert($("#txt1").serialize());
});
<input type="text" name="txt1" id="txt1" value="Текст"><br>
<input type="button" id="btn1" value="Получить значение">

Результат:

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

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

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

Результат:

Поле: txt1
Значение: Текст
$("#btn1").click(function() {
   $("#div1").text($.param($("#txt1").serializeArray()));
});
<input type="text" name="txt1" id="txt1" value="Текст"><br>
<input type="button" id="btn1" value="Получить значение"><br>
<div id="div1"></div>

Результат:

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

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

$("#btn1").click(function() {
   $("#div1").text($.param($(":text")));
});
<input type="text" name="txt1" id="txt1" value="1"><br>
<input type="text" name="txt2" id="txt2" value="2"><br>
<input type="button" id="btn1" value="Получить значения"><br>
<div id="div1"></div>

Результат:

txt1=1&txt2=2

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

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

Результат:

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

Пример обработки данных всей формы разными методами приведен в листинге 8.8.

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

<!doctype html>
<html>
<head>
<title>Методы serialize(), serializeArray() и $.param()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").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>";
      }
      $("#div2").html(txt);
      $("#div3").text($.param(arr));
   });
});
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="text" name="txt1" id="txt1" value="Текст"><br>
<input type="hidden" name="hdn1" id="hdn1" value="1">
<input type="checkbox" name="check1" id="check1" value="yes">
Текст<br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>Мужской
<input type="radio" name="radio1" id="radio1"
       value="female">Женский
<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> Пункт 1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> Пункт 2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> Пункт 3<br>
</form>
<input type="button" id="btn1" value="Получить значения"><br><br>
<b>serialize():</b><br>
<div id="div1"></div>
<b>serializeArray():</b><br>
<div id="div2"></div>
<b>$.param():</b><br>
<div id="div3"></div>
</body>
</html>

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

serialize():
txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&hdn1=1&radio1=male
serializeArray():
0 => txt1 = Текст
1 => hdn1 = 1
2 => radio1 = male
$.param():
txt1=%D0%A2%D0%B5%D0%BA%D1%81%D1%82&hdn1=1&radio1=male
Предыдущая статья Все статьи Следующая статья