Get HTML Form Data In Javascript (Simple Examples)

Welcome to a quick tutorial on how to get the HTML form data in Javascript. So you have an HTML form but want to do the processing in Javascript instead?

That covers the quick basics, but read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

EXAMPLE 1) GET FORM DATA & AJAX POST

<!-- (A) HTML FORM -->
<form id="demoA" onsubmit="return doForm()">
  <input type="text" name="name" required value="Jon Doe">
  <input type="email" name="email" required value="jon@doe.com">
  <input type="submit" value="Go!">
</form>
 
<!-- (B) JS PROCESSING -->
<script>
function doForm () {
  // (B1) FORM DATA - AUTO GET ALL FIELDS FROM "#DEMOA"
  var data = new FormData(document.getElementById("demoA"));

  // (B2) AJAX FETCH
  fetch("SERVER-SCRIPT", { method:"post", body:data })
  .then(res => res.text())
  .then(txt => console.log(txt))
  .catch(err => console.error(err));
 
  // (B3) PREVENT DEFAULT FORM SUBMIT
  return false;
}
</script>

This is the “complete example” of the above introduction snippet. All we need is to:

1. Create the HTML <form> as usual.
2. Create a new FormData(HTML FORM) object, and submit it to the server “as usual”.

 

 

EXAMPLE 2) GET FORM DATA & URL PARAMS

<!-- (A) HTML FORM -->
<form id="demoB" onsubmit="return doForm()">
  <input type="text" name="name" required value="Joe Doe">
  <input type="email" name="email" required value="joe@doe.com">
  <input type="submit" value="Go!">
</form>
 
<!-- (B) JS PROCESSING -->
<script>
function doForm () {
  // (B1) FORM DATA - AUTO GET ALL FIELDS FROM "#DEMOB"
  var data = new FormData(document.getElementById("demoB"));
 
  // (B2) TO URL PARAMS
  var params = new URLSearchParams(data).toString();
 
  // (B3) AJAX FETCH
  fetch("SERVER-SCRIPT?" + params)
  .then(res => res.text())
  .then(txt => console.log(txt))
  .catch(err => console.error(err));

  // (B4) OR REDIRECT - MIGHT AS WELL JUST SUBMIT THE FORM?
  // location.href = "SERVER-SCRIPT?" + params;
 
  // (B5) PREVENT DEFAULT FORM SUBMIT
  return false;
}
</script>

This is an alternative for the folks who want to do GET instead of POST –

• (A & B1) The “usual HTML form” and create var data = new FormData(HTML FORM).
• (B2) Then, “convert” into var params = new URLSearchParams(data).
• (B3) Attach the parameters to the end of the URL – "http://site.com?" + params.toString(), and submit the form.

 

 

EXAMPLE 3) MORE FORM DATA

<!-- (A) HTML FORM -->
<form id="demoC" onsubmit="return doForm()">
  <input type="text" name="name" required value="Joy Doe">
  <input type="email" name="email" required value="joy@doe.com">
  <div id="birthday">12 Mar 2077</div>
  <input type="submit" value="Go!">
</form>
 
<!-- (B) JS PROCESSING -->
<script>
function doForm () {
  // (B1) FORM DATA - AUTO GET ALL FIELDS FROM "#DEMOC"
  var data = new FormData(document.getElementById("demoC"));
 
  // (B2) MANUALLY APPEND MORE
  data.append("birthday", document.getElementById("birthday").innerText);
  data.append("gender", "female");
  data.append("key", "value");
 
  // (B3) FORM DATA YOGA
  data.delete("key");
  var name = data.get("name"); // Joy Doe
  var hasEmail = data.has("email"); // true
  for (let k of data.keys()) { console.log(k); }
  for (let v of data.values()) { console.log(v); }
  for (let [k, v] of data.entries()) { console.log(k, v); }
 
  // (B4) PREVENT DEFAULT FORM SUBMIT
  return false;
}
</script>

One last example to address a few common concerns.

• (A) Take note that the HTML form now has a “custom <div id="birthday"> widget”.
• (B1) Since the “custom widget” is not the usual <input>, var data = new FormData(FORM) will not automatically adapt data from it.
• (B2) To “fix” that, we can use data.append("KEY", "VALUE") to manually add more data entries.
• (B3) Now, the FormData object is not some “black hole”. You put data in and have no idea what’s inside.
  • get(KEY) Returns the value of the specified KEY.
  • has(KEY) Checks if the dataset contains KEY.
  • key() Return all the keys in an array.
  • values() Return all the values in an array.
  • entries() Returns all the keys and values in an array.

 

 

 

LINKS & REFERENCES

• Get Element By Id – MDN
• Form Data – MDN
• Submit Form Without Reloading – Code Boxx
• Display Message After Form Submit – Code Boxx

 

INFOGRAPHIC CHEAT SHEET