How to convert form data to JSON with jQuery

Bjorn Krols

Bjorn Krols

Published on
06 December 2021

This brief post explains how to convert form data to JSON with jQuery.

The snippet below is a utility function to serialize a form's data to JSON:

function convertFormToJSON(form) {
  const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
  const json = {};
  $.each(array, function () {
    json[this.name] = this.value || "";
  });
  return json;
}

As a bonus, here is a fancy reduce version:

function convertFormToJSON(form) {
  return $(form)
    .serializeArray()
    .reduce(function (json, { name, value }) {
      json[name] = value;
      return json;
    }, {});
}

You can not use the following:

$("#myform").serialize();

Because it encodes as a query string rather than JSON.

Example submit listener:

$("#contact-form").on("submit", function (e) {
  e.preventDefault();
  const form = $(e.target);
  const json = convertFormToJSON(form);
  console.log(json);
});

Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!-- HTML-->
    <form id="contact-form">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Name" required="" />
      <label for="message">Message</label>
      <textarea
        id="message"
        name="message"
        placeholder="Message"
        required=""
      ></textarea>
      <button type="submit">Send</button>
    </form>

    <!-- JavaScript -->
    <script>
      function convertFormToJSON(form) {
        const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
        const json = {};
        $.each(array, function () {
          json[this.name] = this.value || "";
        });
        return json;
      }

      $("#contact-form").on("submit", function (e) {
        e.preventDefault();
        const form = $(e.target);
        const json = convertFormToJSON(form);
        console.log(json);
      });
    </script>
  </body>
</html>

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.

More like this