Урок - .serializeArray()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.serializeArray() кодирует элементы форсы в виде массива ключ-значение.

Синтаксис метода jQuery.serializeArray()

.serializeArray()

У метода jQuery.serializeArray() нет аргументов.

Описание метода jQuery.serializeArray()

Метод jQuery.serializeArray() создает JavaScript массив объектов, готовых для использования при кодировании в JSON-строку. В этой операции в jQuery объект представляется как набор элементов формы. Элементы могут быть нескольких типов:

<form>
    <div><input type="text" name="a" value="1" id="a" /></div>
    <div><input type="text" name="b" value="2" id="b" /></div>
    <div><input type="hidden" name="c" value="3" id="c" /></div>
    <div>
        <textarea name="d" rows="8" cols="40">4</textarea>
    </div>
    <div>
        <select name="e">
            <option value="5" selected="selected">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
    </div>
    <div>
        <input type="checkbox" name="f" value="8" id="f" />
    </div>
    <div>
        <input type="submit" name="g" value="Submit" id="g" />
    </div>
</form>

Метод jQuery.serializeArray() использует стандартные правила W3C для "успешных элементов управления"/"successful controls", чтобы определить, какие элементы она необходимо включать в набор элементов для сериализации. Например элемент должен иметь атрибут name и быть активным (enabled). Если сабмит (submit) формы происходит не от кнопки сабмита (<input type="submit> или <button type="submit"></button>) данные о кнопке не включаются в массив для сериализации. Также не включаются данные из элемента выбора файла (<input  type="file").

Метод jQuery.serializeArray() может работать отдельно с элементами формы, такие как <input>, <select>, <textarea>. Однако, как правило проще работать с элементом формы <form>.

$('form').submit(function() {
    console.log($(this).serializeArray());
    return false;
});

Это приведет к следующей структуре данных (при условии, что браузер поддерживает console.log):

[
    {
        name: "a",
        value: "1"
    },
    {
        name: "b",
        value: "2"
    },
    {
        name: "c",
        value: "3"
    },
    {
        name: "d",
        value: "4"
    },
    {
        name: "e",
        value: "5"
    }
]

Пример

Получаем значение элементов формы и выодим результат.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body, select { font-size:14px; }
            form { margin:5px; }
            p { color:red; margin:5px; }
            b { color:blue; }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
<body>
    <p><b>Results:</b> <span id="results"></span></p>
    <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>
    <script>
        function showValues() {
            var fields = $(":input").serializeArray();
            $("#results").empty();
            jQuery.each(fields, function(i, field){
                $("#results").append(field.value + " ");
            });
        }
        $(":checkbox, :radio").click(showValues);
        $("select").change(showValues);
        showValues();
    </script>
</body>
</html>