jQuery.serialize

Simple example how to use serialize()

by Alexey Demin

HTML

<table>
<tr>
    <th>Name</th><th>Value</th>
</tr>
<tr>
    <td>Text 1</td><td><input type="text" name="text1" value="" /></td>
</tr>
<tr>
    <td>Text 2</td><td><input type="text" name="text2" value="" /></td>
</tr>
<tr>
    <td>Select 1<td>
    <select name="select1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select></td>
</tr>
<tr>
    <th colspan="2"><button><span>Serialize</span></button></th>
</tr>
</table>
<textarea></textarea>

CSS

* {
 font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
 font-weight: bold;
}
table {
 margin: 5px;
 border:1px solid #26445F;   
 cursor: default;
}
th {
 text-align: center;
 background-color: #45719B;
 color: white;
 font-size: 9pt;
 padding: 3px;
}
th:last-child {
 padding: 0;
}
td {
 padding: 2px;
 font-size: 8pt;
 border-bottom: 1px dotted #222;
 border-right: 1px dotted #222;
}
textarea {
 margin: 5px;
 padding: 3px;
 border: 2px dashed #666;
 background-color: #DEDEDE;
 color: #222;
}

JavaScript

(function(){

    $("button").on("click", function(){
      $("textarea").html($("input").add("select").serialize());
    });

})(jQuery);