FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real-time. The items containing the data category will be analyzed automatically. It will use the Name attribute as the key in the returned JSON object.
How it works
Elements with the data
class will automatically be parsed. It will use the name
attribute as a key in the returned JSON object.
For checkboxes:
It will return as true or false.
For radio buttons:
It will use the value
attribute.
For dropdowns:
It will value
of the selected <option>
, if none is present the text value will be used.
Must Read: JQuery Library for Linking HTML Forms with JSON | jquery.jsForm
Form Data to JSON with HTML Forms Details
Post Name | Convert Form Data To JSON |
Author Name | e3ndr |
Category | Form Plugins, JSON |
Official Page | Click Here |
Official Website | github.com |
Publish Date | August 13, 2020 |
Last Update | August 8, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Add the CSS class ‘data’ to type fields as follows:
<div id="form"> <h1 class="title">Form</h1> <label class="label"> Username <input class="input data" name="username" type="text" worth="formsjs_" /> </label> <label class="label"> Send me promotional emails <br /> <input class="checkbox data" name="allow_promotional_emails" type="checkbox" /> <br /> </label> <label class="label"> Gender <br /> <div class="select control"> <select class="data" name="gender"> <option selected value="unknown">Prefer not to say</option> <option value="other">Other</option> <option value="female">Female</option> <option value="male">Male</option> </select> </div> </label> <label class="label"> Where do you live? <br /> <div class="select control"> <select class="data" name="zipcode"> <option value="">Elsewhere</option> <option value="94016">San Francisco</option> <option value="94088">San Jose</option> </select> </div> </label> <div class="control"> <label class="label"> Account Type </label> <label class="radio"> <input class="data" checked type="radio" name="account_type" value="free" /> Free Account </label> <label class="radio"> <input class="data" type="radio" name="account_type" value="premium" /> Premium Account </label> </div> </div>
2. Convert subject values right into a JSON object:
function submit() { let username = document.querySelector("[name=username]"); let result = FORMSJS.readForm("#form"); // Make the username box turn red if its length is less than 8 if (username.value.length < 8) username.classList.remove("is-success"); username.classList.add("is-danger"); else username.classList.remove("is-danger"); username.classList.add("is-success"); console.log(result); } Array.from(document.querySelector("#form").getElementsByClassName("data")).forEach((element) => );
3. The JSON object needs to be like these:
{ "username": "formsjs_", "allow_promotional_emails": false, "gender": "unknown", "zipcode": null, "account_type": "free" }
See Demo And Download

Official Website(e3ndr): Click Here
This superior jQuery/javascript plugin is developed by e3ndr. For extra Advanced usage, please go to the official website.