Form To JSON And JSON To Form Converter – form-data-json

Category: Form , Javascript | April 9, 2020
Author: brainfoolong
Views Total: 3,023 views
Official Page: Go to website
Last Update: April 9, 2020
License: MIT


Form To JSON And JSON To Form Converter – form-data-json


form-data-json is a Vanilla JavaScript library to simplify the manipulation of HTML form with 2 functionalities:

  • Form Builder: Fill form fields with JSON data you provide.
  • Form Output: Output form values as JSON data.

How to use it:

1. To get started, include the JavaScript file form-data-json.min.js on the webpage.

<script src="dist/form-data-json.min.js"></script>

2. Your form fields must have unique names as follows:

<input type="email" name="email" />
<input type="email" name="name" />

3. Fill the form fields with JSON data you provide.

FormDataJson.fillFormFromJsonValues(document.querySelector("form"), {
  'email': '[email protected]',
  'name': '''

4. Fill a specific form field.

FormDataJson.setInputValue(document.querySelector("input"), '');

5. Output all form values.

let values = FormDataJson.formToJson(document.querySelector("form"));

=> {email: "[email protected]", name: ""}

6. Get the value from a specific form field.

let values = FormDataJson.getInputValue(document.querySelector("input"));

7. Get values as base64 data uri.

FormDataJson.formToJson(document.querySelector("form"), null, function(values){})

8. Possible options.

let values = FormDataJson.formToJson(document.querySelector("form"), new FormDataJsonOptions({ 
    // options here

FormDataJson.fillFormFromJsonValues(document.querySelector("form"), {'name': ''}, new FormDataJsonOptions({ 
    // options here

   * Include all disabled inputs in result data
   * @type {boolean}
  includeDisabled = false

   * Include checkboxes that are unchecked with a null, otherwise the key will not exist in result data
   * @type {boolean}
  includeUncheckedAsNull = false

   * Include all input buttons/submits values, otherwise the key they will not exist in result data
   * @type {boolean}
  includeButtonValues = false

   * Will unset all existing input fields in form when using fillFormFromJsonValues
   * This will be helpful if you have checkboxes and want to fill from json object, but checkboxes still stay checked
   * because the key not exist in the json data
   * @type {boolean}
  unsetAllInputsOnFill = false


You Might Be Interested In:

Leave a Reply