JSFiddle - React, Tailwind, and code Playground

Hidden field reset behaviour

by tonytlwu

HTML

<form id="form">
<div class="alert">These fields are loaded as empty fields, then are given a value after 1 second to simulate a change.</div>
<p><label>Normal field</label><br><input type="text" id="input-1" /></p>
<p><label>Read-only field</label><br><input type="text" id="input-2" readonly /></p>
<p><label>Disabled field</label><br><input type="text" id="input-3" disabled /></p>
<p><label>Hidden field</label><br><input type="hidden" id="input-4" /><em>Value: <span id="hidden-value"></span></em></p>
<p><input type="reset" />
</form>

CSS

body { font-family: arial; line-height: 1.38; }
.alert { background: beige; border: 1px solid orange; padding: 10px; margin: 10px 0; }
label { font-weight: bold; }

JavaScript

var input1 = document.getElementById('input-1');
var input2 = document.getElementById('input-2');
var input3 = document.getElementById('input-3');
var input4 = document.getElementById('input-4');
var hiddenValue = document.getElementById('hidden-value');

input4.addEventListener('change', function() {
	document.getElementById('hidden-value').innerHTML = input4.value;
}, false);

form.addEventListener('reset', function() {
	hiddenValue.innerHTML = input4.value;
}, false);

setTimeout(function() {
	input1.value = 'One';
  input2.value = 'Two';
  input3.value = 'Three';
  input4.value = 'Four';
  hiddenValue.innerHTML = input4.value;
}, 1000);