JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<form id="MyForm">
  text 1
  <input type="text"><br />
  text 2
  <input type="text"><br />
  un-ticked checkbox
  <input type="checkbox"><br />
  ticked checkbox
  <input type="checkbox" checked><br />
  <select>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
  </select><br />
  <input type="radio" id="val1" name="radio" value="1" checked>
  <label for="val1">Value 1</label><br />
  <input type="radio" id="val2" name="radio" value="2">
  <label for="val2">Value 2</label><br />
  <input type="radio" id="val3" name="radio" value="3">
  <label for="val3">Value 3</label><br />


  <input type="hidden" id="MyHidden" value="42">
  
  <!--<button type="button" onclick="resetForm()">Reset</button>-->
  <input type="reset" name="reset" value="Reset">
  <button type="button" onclick="show()">show hidden</button>
  <button type="button" onclick="change()">Change hidden</button>
</form>

JavaScript

function resetForm() {
  let form = document.getElementById("MyForm");
  let hidden = document.getElementById("MyHidden");
  console.log("hidden value BEFORE reset : " + hidden.value);
  form.reset();
  console.log("hidden value AFTER reset : " + hidden.value);
}

function change() {
  let hidden = document.getElementById("MyHidden");
  hidden.value = "52";
}

function show() {
  let hidden = document.getElementById("MyHidden");
  console.log("hidden value=" + hidden.value);
}