Serialize

by Patrick Hund

HTML

<form>
    <select name="single">
        <option value="">none</option>
        <option>Single</option>
        <option>Single2</option>
    </select>
    <br>
    <select name="multiple" multiple="multiple">
        <option>Multiple</option>
        <option>Multiple2</option>
        <option>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>

CSS

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

JavaScript

function showValues() {
    var str = $("input[type='checkbox'], input[type='radio']").serialize();
    $("#results").text(str);
}
$("input[type='checkbox'], input[type='radio']").on("click", showValues);
$("select").on("change", showValues);
showValues();

$("#results").text($("form").filter().length);