Easily Get or Set Form Input Set/Manipulate As/ From a JSON Object

JSON data model – Form input values from/to JSON is a zero-dependency, multi-browser library to easily get or set/process form input values as/from a JSON object. It can handle all types of input, including multidimensional array names and file input. Native FormData is limited to reading only, we have more:

form data to json converter online, convert multipartform data to json, how to save html form data to json using javascript, convert json to form data, form submit json without ajax, convert html form to json

Read data as a multidimensional object or as a flat list (similar to FormData)

Write the data in the forms
Read Unchecked/Disabled Fields Also
Read file input as base64, array buffer, etc…
Clear forms
Reset models to their default settings
And you don’t even need an <form> element, we accept every container, even <body>
Very Small: ~3KB compressed
Cross-browser including IE11 (yes, ugly too)

How to make use of it:

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

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

2. Form fields must have unique names as follows:

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

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

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

4. Convert form data to JSON.

let values = FormDataJson.toJson(document.querySelector("form"))
let values = FormDataJson.toJson('#myForm');

5. More API methods.

// reset the form
FormDataJson.reset(document.querySelector("form"))

// clear all form fields
FormDataJson.clear(document.querySelector("form"))

6. Possible options for the fromJson method.

FormDataJson.fromJson(document.querySelector("form"), {
  'email': '[email protected]',
  'name': 'webcodeflow''
},{
  /**
   * Does expect the given values are in a flatList, previously exported with toJson
   * Instead of the default bevhiour with nested objects
   * @type {boolean}
   */
  'flatList': false,
  /**
   * If true, than all fields that are not exist in the passed values object, will be cleared/emptied
   * Not exist means, the value must be undefined
   * @type {boolean}
   */
  'clearOthers': false,
  /**
   * If true, than all fields that are not exist in the passed values object, will be reset
   * Not exist means, the value must be undefined
   * @type {boolean}
   */
  'resetOthers': false,
  /**
   * If true, when a fields value has changed, a "change" event will be fired
   * @type {boolean}
   */
  'triggerChangeEvent': false
})

7. Possible options for the toJson method.

let values = FormDataJson.toJson(document.querySelector("form"),{
    /**
     * Include all disabled field values
     * @type {boolean}
     */
    'includeDisabled': false,
    /**
     * Include all button field values
     * @type {boolean}
     */
    'includeButtonValues': false,
    /**
     * Include all unchecked radio/checkboxes as given value when they are unchecked
     * If undefined, than the unchecked field will be ignored in output
     * @type {*}
     */
    'uncheckedValue': undefined,
    /**
     * A function, where first parameter is the input field to check for
     * Must return true if the field should be included
     * All other return values, as well as no return value, will skip the input field in the progress
     * @type {function|null}
     */
    'inputFilter': null,
    /**
     * Does return an array list, with same values as native Array.from(new FormData(form))
     * A list will look like [["inputName", "inputValue"], ["inputName", "inputValue"]]
     * The input name will not be changed and the list can contain multiple equal names
     * @type {boolean}
     */
    'flatList': false,
    /**
     * If true, than this does skip empty fields from the output
     * Empty is considered to be:
     * An empty array (for multiple selects/checkboxes)
     * An empty input field (length = 0)
     * This does recursively remove keys
     * Example: {"agb":"1", "user" : [{"name" : ""},{"name" : ""}]} will be {"agb":"1"}
     * @type {boolean}
     */
    'skipEmpty': false,
    /**
     * A function that will be called when all file fields are read as base64 data uri
     * First passed parameter to this function are the form values including all file data
     * Note: If set, the original return value from toJson() returns null
     * @type {function|null}
     */
    'filesCallback': null,
    /**
     * By default, files are read as base64 data url
     * Possible values are: readAsDataURL, readAsBinaryString, readAsText, readAsArrayBuffer
     * @type {string}
     */
    'fileReaderFunction': 'readAsDataURL',
    /**
    * If true then values try to be a real Array instead of Object where possible
    * If false then all values that are multiple (multiple select, same input names checkboxes, unnamed array indexes, etc...) will be objects
    * @type {boolean}
    */
    'arrayify': true
})

Form To JSON And JSON To Form Converter, Form Data Json Plugin/Github, convert form data to json postman, convert html form to json and post using jquery