Save HTML form data to JSON file using jQuery

Question

Do you want to convert HTML form data to JSON object? If yes, “Form to JSON jQuery plugin” is the best choice. You need to create two files such as “index.html” and “script.js”. You can either download and use the Form to JSON jQuery plugin “.js and .css” files or simply create files and copy paste the code.

Table of Contents Show

Frequently Asked Questions
How do I save html form data to JSON file using JavaScript?
Video Tutorial
Final Words
How can I convert form data to JSON?
Can we send Formdata in JSON?
How can store form data in jQuery?
Does HTML form send JSON?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form to JSON with jQuery</title>

  <link rel="stylesheet" href="./form-to-json.css" type="text/css">
</head>

<body>
  <h2>Sample form:</h2>
  <p>* marked fields are required</p>

  <form id="myForm">
    <div class="form-row">
      <label for="firstname">First Name: *</label><br />
      <input type="text" name="firstname" id="firstname" class="form-input-field" placeholder="First Name" required>
    </div>
    <div class="form-row">
      <label for="lastname">Last Name: *</label><br />
      <input type="text" name="lastname" id="lastname" class="form-input-field" placeholder="Last Name" required>
    </div>
    <div class="form-row">
      <label for="email">Email: *</label><br />
      <input type="email" name="email" id="email" class="form-input-field" placeholder="Email" required>
    </div>
    <div class="form-row">
      <label for="phone">Phone: *</label><br />
      <input type="phone" name="phone" id="phone" class="form-input-field" placeholder="Phone" required>
    </div>
    <div class="form-row">
      <label form="subject">Subject: *</label><br />
      <input type="text" name="subject" id="subject" class="form-input-field" placeholder="Subject" required>
    </div>
    <div class="form-row">
      <label for="comments">Comments:</label><br />
      <textarea name="comments" id="comments" class="form-input-field" rows="6"></textarea>
    </div>
    <div class="form-row">
      <input type="submit" name="submit" value="Submit" class="form-submit-btn">
    </div>
  </form>

  <div class="results">
    <p class="result-json-output"></p>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="./form-to-json.js"></script>
  <script src="./script.js"></script>
</body>

</html>

Read also:- Google Translate Code in JavaScript

script.js

'use strict';

jQuery.noConflict();
jQuery(document).ready(function ($) {

    // usage: 2
    $('#myForm').formToJson('.result-json-output');

});

Please note that, you need to include form-to-json jQuery plugin JavaScript and CSS files. You can download the files using the below download button.

Output

Frequently Asked Questions

How do I save html form data to JSON file using JavaScript?

Video Tutorial

Final Words

Using this free jQuery plugin, you can easily convert HTML form data to JSON object. If you need any help regarding this tutorial feel free and ask us via the comment section. Share this article with other developers via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

How can I convert form data to JSON?

Make a plan: how can we convert form fields to JSON?.

Capture the form's submit event and prevent the default submission..

Convert the form's child elements to JSON..

Check to make sure only form field elements are added to the object..

Add a safeguard to only store checkable fields if the checked attribute is set..

Can we send Formdata in JSON?

Formating data to JSON and making a POST request fromEntries() method. Using the JSON. stringify() method then format the plain form data as JSON. Specify the HTTP request method as POST and using the header field of the Fetch API specify that you are sending a JSON body request and accepting JSON responses back.

How can store form data in jQuery?

After submit the data should be stored like this: $("#myform"). data('bar','lorem'); $("#myform"). data('foo','ipsum');.

jquery..

forms..

Does HTML form send JSON?

HTML provides no way to generate JSON from form data. If you really want to handle it from the client, then you would have to resort to using JavaScript to: gather your data from the form via DOM. organise it in an object or array.

Teknologi File