{"id":13402947,"url":"https://github.com/brainfoolong/form-data-json","last_synced_at":"2025-04-25T16:33:57.793Z","repository":{"id":42990266,"uuid":"252367046","full_name":"brainfoolong/form-data-json","owner":"brainfoolong","description":"A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.","archived":false,"fork":false,"pushed_at":"2024-05-12T01:23:13.000Z","size":333,"stargazers_count":59,"open_issues_count":0,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-23T04:54:03.921Z","etag":null,"topics":["converter","cross-browser","form","form-validation","formdata","forms","inputfield","javascript","json","select","serializejson"],"latest_commit_sha":null,"homepage":"https://brainfoolong.github.io/form-data-json","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brainfoolong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"brainfoolong","custom":"paypal.me/brainfoolong"}},"created_at":"2020-04-02T05:49:20.000Z","updated_at":"2024-10-17T16:10:13.000Z","dependencies_parsed_at":"2024-01-16T10:35:19.010Z","dependency_job_id":"4d9a6d48-5db7-4cc7-94b0-5d9bd3b4ac1f","html_url":"https://github.com/brainfoolong/form-data-json","commit_stats":{"total_commits":92,"total_committers":2,"mean_commits":46.0,"dds":0.4347826086956522,"last_synced_commit":"b2703886b6432e36fb0c98281e2f9adfae3f46ae"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainfoolong%2Fform-data-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainfoolong%2Fform-data-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainfoolong%2Fform-data-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainfoolong%2Fform-data-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brainfoolong","download_url":"https://codeload.github.com/brainfoolong/form-data-json/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224010170,"owners_count":17240697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["converter","cross-browser","form","form-validation","formdata","forms","inputfield","javascript","json","select","serializejson"],"created_at":"2024-07-30T19:01:23.273Z","updated_at":"2025-04-25T16:33:57.786Z","avatar_url":"https://github.com/brainfoolong.png","language":"JavaScript","readme":"![Form Data Json Logo](https://brainfoolong.github.io/form-data-json/img/logo-readme-github.png)\n\n# Form Data Json - Form input values to/from JSON (And a bit more...)\n\nA zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object. It can\nhandle all input types, including multidimensional array names and file input.\nNative [FormData](https://developer.mozilla.org/docs/Web/API/FormData) is limited to reading only, we have way more:\n\n* Read data as multidimensional object or as a flat list (similar to FormData)\n* Write data into forms\n* Read unchecked/disabled fields as well\n* Read file inputs as base64, arraybuffer, etc...\n* Clear forms\n* Reset forms to their defaults\n* And, you don't even need a `\u003cform\u003e` element, we accept every container, even the `\u003cbody\u003e`\n* Super small: ~4kB gzipped\n* Typescript and Javascript\n* Cross browser - IE11 was supported until [2.2.3](https://github.com/brainfoolong/form-data-json/releases/tag/2.2.3)\n\n## Installation\n\nDownload [latest release](https://github.com/brainfoolong/form-data-json/releases/latest) and\ninclude `dist/form-data-json.min.js` into your project.\n\n```html\n\n\u003cscript src=\"dist/form-data-json.min.js\"\u003e\u003c/script\u003e\n```\n\n###### CDN (Latest version automatically, do not use it in production because of possible breaking changes)\n\n```html\n\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/form-data-json-convert/dist/form-data-json.min.js\"\u003e\u003c/script\u003e\n```\n\n###### NPM\n\n```cmd\nnpm install form-data-json-convert\n// import in NodeJS: const FormDataJson = require('form-data-json-convert')\n```\n\n###### ES6 Module in Browser\n\n```cmd\nimport FormDataJson from 'pathtodistfolder/form-data-json.es6.js'\n```\n\n###### Typescript\n\nUse `dist/form-data-json.ts`.\n\n## Demo\n[Check it out here](https://brainfoolong.github.io/form-data-json)\n\n## What's not supported\n\n* Write to `\u003cinput type=\"file\"\u003e` It's impossible in javascript to set values for file inputs, for security reasons.\n  However, reading file input as base64 data uri string is supported.\n\n## How to use\n\n### Read data\n\n```javascript\nlet values = FormDataJson.toJson(document.querySelector(\"form\")) // with native element\nlet values = FormDataJson.toJson(\"#form-id\") // with selector\nlet values = FormDataJson.toJson($(\"#form-id\")) // with jQuery\n``` \n\n###### Read form input values as a flat object (similar to native FormData())\n\n```javascript\nlet values = FormDataJson.toJson(document.querySelector(\"form\"), { flatList: true })\n``` \n\n###### Read form input values including disabled\n\n```javascript\nlet values = FormDataJson.toJson(document.querySelector(\"form\"), { includeDisabled: true })\n```\n\n###### Read with file inputs as base64 data uri\n\n```javascript\nFormDataJson.toJson(document.querySelector(\"form\"), {\n  filesCallback: function (values) {\n    console.log(values)\n  }\n})\n```\n\n###### Read form input values but filter out, for example, all password fields\n\n```javascript\nlet values = FormDataJson.toJson(document.querySelector(\"form\"), {\n  inputFilter: function (inputElement) {\n    return (inputElement.type || 'text') !== 'password'\n  }\n})\n``` \n\n### Write data\n\n```javascript\nFormDataJson.fromJson(document.querySelector(\"form\"), { 'name': 'BrainFooLong' })\n```\n\n###### Set form input values and clear all other existing input values\n\n```javascript\nFormDataJson.fromJson(document.querySelector(\"form\"), { 'name': 'BrainFooLong' }, { clearOthers: true })\n```\n\n###### Reset all input fields to their default values\n\n```javascript\nFormDataJson.reset(document.querySelector(\"form\"))\n```\n\n###### Clear all input fields to empty values\n\n```javascript\nFormDataJson.clear(document.querySelector(\"form\"))\n```\n\n###### All default options for FormDataJson.toJson()\n\nYou can edit this defaults globally by modifying `FormDataJson.defaultOptionsToJson`.\n\n```typescript defaultOptionsToJson\nexport interface FormDataJsonOptionsToJson {\n  /**\n   * Include all disabled field values\n   * @type {boolean}\n   */\n  includeDisabled?: boolean;\n\n  /**\n   * Include all button field values\n   * @type {boolean}\n   */\n  includeButtonValues?: boolean;\n\n  /**\n   * Include all unchecked radio/checkboxes as given value when they are unchecked\n   * If undefined, then the unchecked field will be ignored in output\n   * @type {*}\n   */\n  uncheckedValue?: any;\n\n  /**\n   * A function, where first parameter is the input field to check for\n   * Must return true if the field should be included\n   * All other return values, as well as no return value, will skip the input field in the progress\n   * @type {function|null}\n   */\n  inputFilter?: ((input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLElement) =\u003e boolean | undefined) | null;\n\n  /**\n   * Does return an array list, with same values as native Array.from(new FormData(form))\n   * A list will look like [[\"inputName\", \"inputValue\"], [\"inputName\", \"inputValue\"]]\n   * The input name will not be changed and the list can contain multiple equal names\n   * @type {boolean}\n   */\n  flatList?: boolean;\n\n  /**\n   * If true, then this does skip empty fields from the output\n   * Empty is considered to be:\n   * An empty array (for multiple selects/checkboxes)\n   * An empty input field (length = 0 or null)\n   * This does recursively remove keys\n   * Example: {\"agb\":\"1\", \"user\" : [{\"name\" : \"\"},{\"name\" : \"\"}]} will be {\"agb\":\"1\"}\n   * @type {boolean}\n   */\n  skipEmpty?: boolean;\n\n  /**\n   * A function that will be called when all file fields are read as base64 data uri\n   * First passed parameter to this function are the form values including all file data\n   * Note: If set, the original return value from toJson() returns null\n   * @type {function|null}\n   */\n  filesCallback?: ((fieldValues: any) =\u003e void) | null;\n\n  /**\n   * By default, files are read as base64 data url\n   * Possible values are: readAsDataURL, readAsBinaryString, readAsText, readAsArrayBuffer\n   * @type {list}\n   */\n  fileReaderFunction?: 'readAsDataURL' | 'readAsBinaryString' | 'readAsText' | 'readAsArrayBuffer';\n\n  /**\n   * If true then values try to be a real Array instead of Object where possible\n   * If false then all values that are multiple (multiple select, same input names checkboxes, unnamed array indexes, etc...) will be objects\n   * @type {boolean}\n   */\n  arrayify?: boolean;\n\n  /**\n   * If true and given a form with an id attribute, then the script will\n   * search for any form input element with a form attribute which matches the id of the form in the complete dom\n   * This may come with a performance penalty and you should deactivate it when not needed\n   * Default is true, as this is html standard behaviour\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form\n   * @type {boolean}\n   */\n  includeLinkedFormElements?: boolean;\n}\n```\n\n###### All default options for FormDataJson.fromJson()\n\nYou can edit this defaults globally by modifying `FormDataJson.defaultOptionsFromJson`.\n\n```typescript defaultOptionsFromJson\nexport interface FormDataJsonOptionsFromJson {\n\n  /**\n   * Does expect the given values are in a flatList, previously exported with toJson\n   * Instead of the default behaviour with nested objects\n   * @type {boolean}\n   */\n  flatList?: boolean;\n\n  /**\n   * If true, then all fields that are not exist in the passed values object, will be cleared/emptied\n   * Not exist means, the value must be undefined\n   * @type {boolean}\n   */\n  clearOthers?: boolean;\n\n  /**\n   * If true, then all fields that are not exist in the passed values object, will be reset\n   * Not exist means, the value must be undefined\n   * @type {boolean}\n   */\n  resetOthers?: boolean;\n\n  /**\n   * If true, when a fields value has changed, a \"change\" event will be fired\n   * @type {boolean}\n   */\n  triggerChangeEvent?: boolean;\n\n  /**\n   * Same as\n   * @see FormDataJsonOptionsToJson.includeLinkedFormElements\n   * @type {boolean}\n   */\n  includeLinkedFormElements?: boolean;\n}\n```\n\n###### All default options for FormDataJson.reset()\n\nYou can edit this defaults globally by modifying `FormDataJson.defaultOptionsReset`.\n\n```typescript defaultOptionsReset\nexport interface FormDataJsonOptionsReset {\n\n  /**\n   * If true, when a fields value has changed, a \"change\" event will be fired\n   * @type {boolean}\n   */\n  triggerChangeEvent?: boolean;\n\n  /**\n   * Same as\n   * @see FormDataJsonOptionsToJson.includeLinkedFormElements\n   * @type {boolean}\n   */\n  includeLinkedFormElements?: boolean;\n}\n```\n###### All default options for FormDataJson.clear()\n\nYou can edit this defaults globally by modifying `FormDataJson.defaultOptionsClear`.\n\n```typescript defaultOptionsClear\nexport interface FormDataJsonOptionsClear {\n\n  /**\n   * If true, when a fields value has changed, a \"change\" event will be fired\n   * @type {boolean}\n   */\n  triggerChangeEvent?: boolean;\n\n  /**\n   * Same as\n   * @see FormDataJsonOptionsToJson.includeLinkedFormElements\n   * @type {boolean}\n   */\n  includeLinkedFormElements?: boolean;\n}\n```\n## How to contribute\n\n* Please write an issue before you start programming.\n* Always test the official supported browsers.\n* Write all tests in `docs/tests/test.html`. Each new option must have an own test.\n","funding_links":["https://github.com/sponsors/brainfoolong","paypal.me/brainfoolong"],"categories":["TypeScript","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainfoolong%2Fform-data-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrainfoolong%2Fform-data-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainfoolong%2Fform-data-json/lists"}