save form data json - Free Download Save Form Data As JSON Using jQuery - Form to JSON

Free Download Save Form Data As JSON Using jQuery – Form to JSON

Posted on

This time I will share jQuery Plugin and tutorial about Save Form Data As JSON Using jQuery – Form to JSON, hope it will help you in programming stack.

save form data json - Free Download Save Form Data As JSON Using jQuery - Form to JSON
File Size: 7.7 KB
Views Total: 484
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny yet effective jQuery Form To JSON converter that converts form fields and their values into a JSON object on submit.

With this plugin, you can save and send data of HTML form directly through JSON.

How to use it:

1. Load both jQuery library and the form-to-json plugin in the HTML document.

1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to//js/form-to-json.js"></script>

2. Add form fields to the webpage as follows. Supported form data:

  • id
  • firstname
  • lastname
  • email
  • phone
  • subject
  • comments
  • createdDate
01 <form id="myForm">
02   <div class="form-row">
03     <label for="firstname">First Name: *</label><br />
04     <input type="text" name="firstname" id="firstname" placeholder="First Name" required>
05   </div>
06   <div class="form-row">
07     <label for="lastname">Last Name: *</label><br />
08     <input type="text" name="lastname" id="lastname" placeholder="Last Name" required>
09   </div>
10   <div class="form-row">
11     <label for="email">Email: *</label><br />
12     <input type="email" name="email" id="email" placeholder="Email" required>
13   </div>
14   <div class="form-row">
15     <label for="phone">Phone: *</label><br />
16     <input type="phone" name="phone" id="phone" placeholder="Phone" required>
17   </div>
18   <div class="form-row">
19     <label form="subject">Subject: *</label><br />
20     <input type="text" name="subject" id="subject" placeholder="Subject" required>
21   </div>
22   <div class="form-row">
23     <label for="comments">Comments:</label><br />
24     <textarea name="comments" id="comments" rows="6"></textarea>
25   </div>
26   <div class="form-row">
27     <input type="submit" name="submit" value="Submit">
28   </div>
29 </form>

3. Create a container to hold the results (JSON object).

1 <p class="result-json-output"></p>

4. Initialize the plugin and output the results on form submit.

1 $('#myForm').formToJson('.result-json-output');

Changelog:

2020-12-14

  • feature update: log the json data

2020-12-04

  • spelling correction