jQuery serialize()

Slyweb

На разработку сайта! Скидки 50%!

Поиск функций jQuery

Характеристика функции

[Функция] serialize()

Раздел "Ajax"

Собрать набор полей input в строку данных.

Параметры

Описание

Функция используется для подготовки пользователем данных полей input, отправляемых на сервер. Строка объединенных данных представлена в формате совместимым с большинством серверных языков программирования и фрэймовиков.

Для нормальной работы функции запросы должны формироваться из полей формы, имеющих атрибут name. Если указан только id, то функция работать не будет. К примеру, с данным кодом:

<script>
$(document).ready (function () {
  function showValues() {
      var str = $("form").serialize();
	  $("#results").text(str);
    }
    $("input").change(showValues);
    showValues();
});
</script>

</head>
<body>
<form id="result">
<input id="email" name="email1" type="text" />
<input id="email1" name="email1" type="text" />
</form>

<div id="results">

</div>

</body>

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

<script>
$(document).ready (function () {
  function showValues() {
      var str = $("form").serialize();
	  $("#results").text(str);
    }
    $("input").change(showValues);
    showValues();
});
</script>

</head>
<body>
<form id="result">
<input id="email" type="text" />
<input id="email1" name="email1" type="text" />
</form>

<div id="results">

</div>

</body>

Для правильной работы данного примера используйте следующий php:

<?php
header('Content-Type: text/xml; charset=UTF8;');
echo "<response>";
echo "<city>".$_REQUEST['city']."</city>";    
echo "</response>";
?>

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Собрать данные формы в строку, которая может быть отправлена на сервер Ajax запросом.

Пример
Весь код

"jQuery"

    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

"HTML"

<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>


    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>


    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>
  <tt id="results"></tt>

"CSS"

  
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

  });
</script>

</head>
<body class="iframe">


<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>


    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>


    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>
  <tt id="results"></tt>


</body>
</html>


<style>
  
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }
</style>

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/serialize/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: