Demo jQuery serializeArray

by Adi Jaya

HTML

<form id="demo">
    <ol>
        <li><input type="text" name="data1" value="1" /></li>
        <li><input type="text" name="data2" value="2" /></li>
        <li><input type="text" name="data3" value="3" /></li>
        <li><input type="text" name="data4" value="4" /></li>
        <li><input type="text" name="data5" value="5" /></li>
        <li><input type="text" name="data6" value="6" /></li>
        <li><input type="text" name="data7" value="hello" /></li>
    </ol>
    <button type="button" id="run">TEST</button>
</form>

<pre id="output1"></pre>
<pre id="output2"></pre>

CSS

pre {
  padding: 15px;
  background: beige;
  overflow: auto;
}

JavaScript

$(document).on("click", "#run", function() {
    var data = $("#demo").serializeArray();
    //output1
    $("#output1").text(JSON.stringify(data, null, 4));

    //output2
    var el = "div";
    var len = data.length;
    var html = "";

    for (var i = 0; i < len; i++) {
        html += "<" + el + " data-name='" + data[i].name + "'>" + data[i].value + "</" + el + ">";
        if (i != len - 1) {
            html += "\n";
        }
    }
    $("#output2").text(html);
});