JSFiddle - React, Tailwind, and code Playground

by Shobhit Sharma

HTML

<form>
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
     <option value="hi" selected="selected">Hi</option>
     <option value="ho">Ho</option>
 </select>
</form>

<div>$('form').serializeArray():</div>
<div id=serializearray>asfdg</div>

<div>$('form').serialize():</div>
<div id=serialize>asfdg</div>

CSS

div {
    margin-top: 27px;
}
#serializearray, #serialize {
    background-color: #eee;
    border: 1px solid #111;
    padding: 3px;
    margin: 9px;
}

JavaScript

$(function() {
    var update = function() {
        $('#serializearray').text(        
            JSON.stringify($('form').serializeArray())
        );
        $('#serialize').text(        
            JSON.stringify($('form').serialize())
        );
    };
    update();
    $('form').change(update);
})