<form> <p><label>Your name</label><input type="text" name="name" /></p> <p><label>Email</label><input type="text" name="email" /></p> <p><input type="checkbox" name="newsletter" /><label>Newsletter</label></p> <p><input type="checkbox" name="updates" /><label>Updates</label></p> </form> <p><input id="convert" type="checkbox" /><label>Convert values</label></p> <p>Form data:</p> <p id="json"></p>
$('input').change(function() { var convert = $('#convert').is(':checked'); $('#json').html($.toJSON($('form').formParams(convert))); });
body { font-family: Verdana; } p { margin: 10px 0; } form { border: 1px solid #505050; padding: 5px; } #json { color: #505050; } form label { display: block; float: left; width: 100px; }