JSFiddle - React, Tailwind, and code Playground
HTML
<form id="systemform" method="post" onsubmit="$('hash').value=document.location.hash;" action="/savepage.php?table=pages&pageid=test&random=50E5-9676-7530">
<div>
<input type="hidden" id="parentid" name="parentid" value="test" />
<input type="hidden" id="ajax" name="ajax" value="0" />
<input type="hidden" id="hash" name="hash" value="" />
<input type="hidden" id="attachmentindex" name="attachmentindex" value="1357207110222" />
</div>
<div class="controls">
<input class="button save" type="submit" value="Save" name="submit" id="savebutton" />
<span>
<a href="#" class="versions">Versions...</a>
<a href="#" class="customfields">Custom Forms...</a>
<a target="_blank" href="/view/home/test">View</a>
</span>
</div>
<div class="notice" id="customfields-h" style="display: none;">
<div>
<span class="label">Set the custom form for this page: </span>
<select name="customfields" id="customfields" onchange="alert('You must save the page to use the new form.')">
<option value="">- default -</option>
<option value="custom.billboard.xml">Billboard</option>
<option value="custom.boilerplate.xml">Boilerplate</option>
<option value="custom.navigation.xml">Navigation</option>
<option value="custom.pages.xml">Pages</option>
<option value="custom.panel.xml">Panel</option>
<option selected="selected" value="custom.web.form.xml">Web Form</option>
</select>
<span> Swapping custom forms may cause some content to be lost.</span>
</div>
</div>
<div class="notice" id="versions-h" style="display: none;">
<div>
<input type="submit" value="Save Draft" name="draft" id="savedraftbutton" />
<span class="label">Load a version of this page: </span>
<select id="version" onchange="loadVersion(this);">
<option value="">- select -</option>
<option...
JavaScript
function helper(root) {
var result = {};
$('form').find('input').each(function() {
result[this.name] = $(this).val();
});
return result;
}
console.log(helper('body'));