How To 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?

To get the HTML form data in Javascript:

  1. Create a new form data object – var data = new FormData();
  2. Assign an ID to the form fields. For example, <input type="email" id="user-email"/>
  3. Lastly, append the value to the form data object. data.append("email", document.getElementById("user-email").value);

That covers the 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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Get Form Data Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

JAVASCRIPT GET FORM DATA

All right, let us now get into the examples of how to get the form data in Javascript.

 

1) GET INDIVIDUAL FIELDS

1-basic.html
<!-- (A) HTML FORM -->
<form onsubmit="return doForm()">
  Name:
  <input type="text" id="user_name" required value="Jon Doe"/> <br>
  Email:
  <input type="email" id="user_email" required value="jon@doe.com"/> <br>
  <input type="submit" value="Go!"/>
</form>
 
<!-- (B) JS PROCESSING -->
<script>
function doForm () {
  // (B1) FORM DATA OBJECT
  var data = new FormData();

  // (B2) APPEND FIELDS
  data.append("name", document.getElementById("user_name").value);
  data.append("email", document.getElementById("user_email").value);

  // (B3) WHATEVER YOU WANT TO DO NEXT
  for (let [k, v] of data.entries()) { console.log(k, v); }
  return false;
}
</script>

As in the introduction above, all we need is to:

  • Create a var data = new FormData() object.
  • Append to the form data object data.append("KEY", document.getElementById("ID").value).

 

 

2) GET ALL FORM FIELDS

2-get-all.html
<!-- (A) HTML FORM -->
<form id="user_form" onsubmit="return doForm()">
  Name:
  <input type="text" name="user_name" required value="Jon Doe"/> <br>

  Email:
  <input type="email" name="user_email" required value="jon@doe.com"/> <br>

  Gender:
  <label>
    <input type="radio" name="user_gender" value="Male" checked/> Male
  </label>
  <label>
    <input type="radio" name="user_gender" value="Female"/> Female
  </label>
  <label>
    <input type="radio" name="user_gender" value="Other"/> Other
  </label><br>

  Pets:
  <label>
    <input type="checkbox" name="user_doge" value="Doge"/> Doge
  </label>
  <label>
    <input type="checkbox" name="user_cate" value="Cate"/> Cate
  </label><br>

  Marital Status
  <select name="user_marital">
    <option>Single</option>
    <option>Married</option>
    <option>Divorced/Widowed</option>
  </select><br>

  <input type="submit" value="Go!"/>
</form>
 
<!-- (B) JS PROCESSING -->
<script>
function doForm () {
  // (B1) FORM DATA OBJECT
  var data = new FormData();

  // (B2) APPEND FIELDS
  var all = document.querySelectorAll("#user_form input, #user_form textarea, #user_form select");
  for (let field of all) {
    // EXCLUDE SUBMIT + BUTTONS
    if (field.type != "submit" && field.type != "button") { 
      // CHECKBOX + RADIO - MUST BE CHECKED
      if (field.type=="radio" || field.type=="checkbox") {
        if (field.checked) { data.append(field.name, field.value); }
      }
      // OTHER FIELDS
      else { data.append(field.name, field.value); }
    }
  }

  // (B3) WHATEVER YOU WANT TO DO NEXT
  // DO CHECKS, SEND TO SERVER, ETC...
  for (let [k, v] of data.entries()) { console.log(k, v); }
  return false;
}
</script>

In the previous example, we have to manually get each and every field. It works well if there are not many fields, but here is a better way to deal with massive forms – It may look complicated at first, but keep calm and look carefully.

  • Assign an id to the <form> itself.
  • Instead of getting fields one-by-one, we use document.querySelectorAll(...) to get all the form fields, text areas, dropdowns, checkboxes, and radio buttons.
  • Lastly, loop through all the fields for (let field of all) { ... } and collect the data selectively.

 

 

3) HOW TO SEND FORM DATA

3-ajax.html
<script>
function doForm () {
  // (B1) FORM DATA OBJECT
  var data = new FormData();
 
  // (B2) APPEND FIELDS
  data.append("name", document.getElementById("user_name").value);
  data.append("email", document.getElementById("user_email").value);
 
  // (B3) AJAX POST
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "SERVER.SCRIPT");
  xhr.onload = function () { alert(this.response); };
  xhr.send(data);
  return false;
}
</script>

Lastly, here is a quick one for you guys who are wondering how to send the form data to the server – We do it with an AJAX call.

  • Create a var xhr = new XMLHttpRequest() object.
  • Set the submission method (post or get) and target URL – xhr.open("POST", "SERVER.SCRIPT").
  • Optionally, define what to do after the form submission – xhr.onload = function () { ... };
  • Lastly, send the form data out – xhr.send(data);

P.S. A quick highlight that AJAX calls will only work with  http://, not file://.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Get HTML Form Data In Javascript (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *