Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

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

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

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

$(,,#btnl") .click (function ()   {
alert($("#txtl").serialize());
});
<input type="text” name=”txtl” id="txtl" value=”Текст"><br> 
<input type="button" id="btnl" value="Получить значение">
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82

serializeArray () — возвращает массив всех данных формы. Первым элемен-том является порядковый номер элемента внутри формы. Нумерация начинает-ся с 0. Второй элемент представляет собой объект с двумя свойствами:
name — название поля в форме;
value — значение поля.

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

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

Результат:
Поле: txtl
Значение: Текст

$.param(Объект) — позволяет преобразовать объект в строку, предназна-ченную к отправке на сервер. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Не требует предварительного нахожде-ния коллекции элементов.

$("#btnl").click(function()   {
$("#divl").text($.param($("#txtl").serializeArray()));
});
<input type="text" name="txtl" id="txtl" value="Текст"><br> 
<input type="button" id="btnl" value="Получить значение"><br> 
<div id="divl” ></div>
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82
В качестве параметра можно передать коллекцию элементов. В качестве примера получим значения всех текстовых полей.
$("#btnl").click(function()   {
$("#divl").text($.param($(":text") ) ) ;
});
<input type="text" name="txtl" id="txtl" value="1"><br> <input type="text" name="txt2" id="txt2" value="2"><br> <input type="button" id="btnl" value="Получить значения"><br> <div id="divl"></div>
Результат:
txtl=l&txt2=2

Функция позволяет обработать не только данные формы, но и обычные объекты.
var obj = {var1:"Текст", var2:5};
alert($.param(obj));
Результат:
varl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&var2=5

Пример обработки данных всей формы разными методами приведен в листинге 8.8.
Листинг 8.8. Методы serialize(), serializeArray() и $.param()

<html>
<head>
<title>Методы serialize(), serializeArray() и
$.param()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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 + " => " + 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():
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male serializeArray():
0 => txtl = Текст
1 => hdnl = 1
2 => radiol = male $.param():
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male

 
Предыдущая   На главную   Следующая