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

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

Preview:

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

Description:

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': 'cssscript.com''
})

4. Fill a specific form field.

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

5. Output all form values.

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

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

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': 'CSSScript.com'}, 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