Урок - .serialize()

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

Метод jQuery.serialize() кодирует набор элементов формы в виде строки, для передачи.

Синтаксис метода jQeury.serialize()

.serialize()

Метода jQuery.serialize() не имеет аргументов.

Метод jQuery.serialize() создаетс строку текста в стандартном URL-закодированном обозначении. Метод jQuery.serialize() может действовать на jQuery-объекты, которые выбраны индивидуально из элементов управленяи формы, таких как <input>, <textarea> и <select>:

jQuery('input, textarea, select').serialize();

Однако проще выбрать <form> для сериализации

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $(this).serialize() );
});

В указанном примере jQuery сериализует "успешные элементы управления"/"successful controls" в случае сабмита формы.

Внимание: выбирая для сериализации форму и её элементы приведет к дублированию информации.

Примечание: Только элементы "успешные элементы управления"/"successful controls" сериализуются в строку. Значение кнопки submit не будет сериализоваться, если форма сабмит происходит не от кнопки. Для включению элемента формы в сериализацию, элемент формы должен иметь атрибут name. Значение флажков (<input type="checkbox">) и радиокнопок (<input type="radio">) включаются только, если они помечены checked. Данные из элемента вабора файла (<input type="file") не сериализуются.

Пример

Сериализация формы в строку запроса, для отправки на сервер AJAX-запросом.

<!DOCTYPE html>
<html>
    <head>
    <style>
        body, select { font-size:12px; }
        form { margin:5px; }
        p { color:red; margin:5px; font-size:14px; }
        b { color:blue; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <form>
        <select name="single">
            <option>Single</option>
            <option>Single2</option>
        </select>
        <br />
        <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>
        <br />
        <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>
    <p><tt id="results"></tt></p>
    <script>
        function showValues() {
            var str = $("form").serialize();
            $("#results").text( str );
        }
        $("input[type='checkbox'], input[type='radio']").on( "click", showValues );
        $("select").on( "change", showValues );
        showValues();
    </script>
</body>
</html>