JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form">
    <select name="AAA"><option value="111" selected>111<option value="222">222</select>
    <select name="BBB"><option value="111" >111<option value="222" selected>222</select>
    <input type="text" name="XXX" value="foo"/>
    <input type="text" name="YYY" value="bar" />
    <input type="text" name="ZZZ" value="baz" />
    <input type="checkbox" name="DDD" value="baz" checked/>
    <select name="CCC"><option value="111" >111<option value="222">222<option value="333" selected>333</select>
</div>
<table>
<tr><th>expect</th><th>result</th></tr>
<tr><td><textarea id="expect"></textarea></td><td><textarea id="resultset"></textarea></td></tr>
<tr><td colspan="2"><input type="text" id="eq"></td></tr>
</table>

<script src="http://code.jquery.com/jquery-1.5.2.js"></script>

CSS

input, select {display: block}
textarea {width: 100px; height: 100px; margin: 10px}
input#eq {width: 200px}

JavaScript

(function($) {
    var $resultset = [], $expect = "AAA=111\r\nBBB=222\r\nXXX=foo\r\nYYY=bar\r\nZZZ=baz\r\nCCC=333";
    $('#form').find(':text,select').each(function(){
        $resultset.push (this.name + '=' + this.value);
    });
    var $result = $resultset.join("\r\n");
    $('#resultset').val($result);
    $('#expect').val($expect);
    $('#eq').val($result == $expect ? 'equal' : 'not equal');
})(jQuery);