JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="hidden" id="hidden" value="1" />
<input type="checkbox" value="1" />
<input type="button" id="setValue" value="Set value to 2" />
<input type="button" id="checkValue" value="Check value" />
<input type="reset" value="Reset Form" />
</form>
JavaScript
;(function (undefined) {
var i, k, form, element,
formInfo = [];
for (i = 0; i < document.forms.length; i++) {
form = document.forms[i];
formInfo[i] = {};
for (j = 0; j < form.elements.length; j++) {
element = form.elements[j];
if (!element || element.type !== 'hidden')
continue;
formInfo[i][j] = element.value;
}
form.addEventListener('reset', onFormReset);
}
function onFormReset(e) {
var i, k;
for (i = 0; i < document.forms.length; i++) {
if (document.forms[i] === this) {
for (k in formInfo[i]) {
this.elements[k].value = formInfo[i][k];
}
}
}
}
})();
var setValueButton = $("#setValue"),
hiddenField = $("#hidden"),
checkValueButton = $("#checkValue");
setValueButton.click(function () {
hiddenField.val(2);
});
checkValueButton.click(function () {
alert(hiddenField.val());
});