Simple JS Form

by Matt Tyson

HTML

<form name="myform" action="https://echo.zuplo.io/" method="POST">
Enter something in the box: <br>
<input type="text" name="inputbox" id="inputBox" value="" />
<p id="msg"></p>
<input type="range" name="range" min"0" max="100">
<input type="color" name="color">
<input type="date">
<input type="button" name="button" value="Click" onClick="testResults(this.form)" />
<input type="submit" />
</form>

JavaScript

let inputBox = document.querySelector('#inputBox');
inputBox.addEventListener('input', (e) => {
  if (["frodo","bilbo","sam"].includes(e.target.value)){
    document.querySelector('#msg').innerHTML="Already have that Hobbit";
  } else {
    document.querySelector('#msg').innerHTML="";
  }
})


function testResults(form) {
  let inputValue = form.inputbox.value;
  let formData = new FormData(form);
  let object = {};
  formData.forEach(function(value, key) {
    object[key] = value;
  });
  var json = JSON.stringify(object);
  alert(json);

  alert(JSON.stringify(Object.fromEntries(formData)));
}