// listener $(":input").on("keyup change", WriteFormDataToDiv); // call on load WriteFormDataToDiv() function WriteFormDataToDiv() { var data = $(":input").serializeArray() var html = JSON.stringify(data, null, 2) $("#formdata").html(html) }
<input type="text" name="cat" value="frida" /> <input type="text" name="dog" value="buddy" /><br/> <input type="text" name="food" value="pizza" /> <input type="text" name="dessert" value="ice cream" /> <pre id="formdata"></pre> <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> About these SO Questions <ul> <li><a href="https://stackoverflow.com/q/4810841/1366033"> How can I pretty-print JSON using JavaScript? </a></li> <li><a href="https://stackoverflow.com/q/2614862/1366033"> How can I beautify JSON programmatically? </a></li> <li><a href="https://stackoverflow.com/q/3515523/1366033"> Javascript: How to generate formatted easy-to-read JSON straight from an object? </a></li> <li><a href="https://stackoverflow.com/q/1380462/1366033"> How do I write json results to a div using jquery? </a></li> </ul> </div>
pre { padding: 15px; background: lightgrey; }