Skip to content

How to get form data in JavaScript

  • by

You can use FormData to get form data in JavaScript. The FormData interface allows you to construct a set of key/value pairs representing form fields and their values in JavaScript.

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

form-serialize (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Simple way using onclick or JavaScript addEventListener submit.

HTML:

<input type="text" name="name" id="uniqueID" value="value" />

JS:

var nameValue = document.getElementById("uniqueID").value;

Get form data in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<body>
  <form name="valform" action="" method="POST">

    Credit Card Validation: 
    <input type="text" id="cctextboxid" name="cctextbox">
    <br/>

    Card Type: 
    <select name="cardtype" id="cardtypeid">
      <option value="visa">Visa</option>
      <option value="mastercard">MasterCard</option>
      <option value="discover">Discover</option>
      <option value="amex">Amex</option>
      <option value="diners">Diners Club</option>
    </select><br/>

    <input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />

    <script>
      const formData = new FormData(document.querySelector('form'))
      for (var pair of formData.entries()) {
        console.log(pair[0] + ': ' + pair[1]);
      }
    </script>
  </body>
</html>

Output:

How to get form data in JavaScript

Do comment if you have any doubts or suggestions on this Js form topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Tags:

Leave a Reply

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