{"id":16515641,"url":"https://github.com/insin/get-form-data","last_synced_at":"2025-04-09T12:05:28.427Z","repository":{"id":26029314,"uuid":"29472281","full_name":"insin/get-form-data","owner":"insin","description":"Gets form and field data via form.elements","archived":false,"fork":false,"pushed_at":"2020-05-19T22:36:51.000Z","size":53,"stargazers_count":106,"open_issues_count":6,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T10:14:05.097Z","etag":null,"topics":["forms","javascript"],"latest_commit_sha":null,"homepage":"","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/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-19T13:34:00.000Z","updated_at":"2023-11-29T11:48:09.000Z","dependencies_parsed_at":"2022-08-07T11:16:19.237Z","dependency_job_id":null,"html_url":"https://github.com/insin/get-form-data","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fget-form-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fget-form-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fget-form-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fget-form-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/get-form-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"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":["forms","javascript"],"created_at":"2024-10-11T16:17:48.656Z","updated_at":"2025-04-09T12:05:28.398Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# get-form-data\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\nGets form data - or data for a named form field - via `form.elements`.\n\nData is retrieved in a format similar to request parameters which would be sent if the form was submitted, so this module is suitable for extracting form data on the client side for projects which implement isomorphic handling of form submission.\n\n## Install\n\n```\nnpm install get-form-data\n```\n\nBrowser bundles area available, which export a global `getFormData` function.\n\n* [get-form-data.js](https://unpkg.com/get-form-data/umd/get-form-data.js) (development version)\n* [get-form-data.min.js](https://unpkg.com/get-form-data/umd/get-form-data.min.js) (compressed production version)\n\n## Usage\n\n### Getting form data\n\nTo get data for an entire form, use the `getFormData()` function:\n\n```html\n\u003cform id=\"productForm\"\u003e\n  ...\n  \u003clabel\u003eProduct:\u003c/label\u003e\n  \u003cselect name=\"product\"\u003e\n    \u003coption value=\"1\" selected\u003eT-shirt\u003c/option\u003e\n    \u003coption value=\"2\"\u003eHat\u003c/option\u003e\n    \u003coption value=\"3\"\u003eShoes\u003c/option\u003e\n  \u003c/select\u003e\n\n  \u003clabel\u003eQuantity:\u003c/label\u003e\n  \u003cinput type=\"number\" name=\"quantity\" min=\"0\" step=\"1\" value=\"9\"\u003e\n\n  \u003clabel\u003eExpress shipping\u003c/label\u003e\n  \u003cp\u003eDo you want to use \u003ca href=\"/shipping#express\"\u003eExpress Shipping\u003c/a\u003e?\u003c/p\u003e\n  \u003cdiv class=\"radios\"\u003e\n    \u003clabel\u003e\u003cinput type=\"radio\" name=\"shipping\" value=\"express\" checked\u003e Yes\u003c/label\u003e\n    \u003clabel\u003e\u003cinput type=\"radio\" name=\"shipping\" value=\"regular\"\u003e No\u003c/label\u003e\n  \u003c/div\u003e\n\n  \u003clabel\u003eTerms of Service:\u003c/label\u003e\n  \u003cp\u003eI have read and agree to the \u003ca href=\"/\"\u003eTerms of Service\u003c/a\u003e.\u003c/p\u003e\n  \u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\" name=\"tos\" checked\u003e Yes\u003c/label\u003e\n  ...\n\u003c/form\u003e\n```\n```javascript\nlet form = document.querySelector('#productForm')\n\nlet data = getFormData(form)\n\nconsole.log(JSON.stringify(data))\n```\n```json\n{\"product\": \"1\", \"quantity\": \"9\", \"shipping\": \"express\", \"tos\": true}\n```\n\n### Getting field data\n\nTo get data for individual form fields (which may contain multiple form inputs with the same name), use the `getFieldData()` function, which is exposed as a property of `getFormData`:\n\n```html\n\u003cform id=\"tshirtForm\"\u003e\n  ...\n  \u003clabel\u003eSizes:\u003c/label\u003e\n  \u003cdiv class=\"checkboxes\"\u003e\n    \u003clabel\u003e\u003cinput type=\"checkbox\" name=\"sizes\" value=\"S\"\u003e S\u003c/label\u003e\n    \u003clabel\u003e\u003cinput type=\"checkbox\" name=\"sizes\" value=\"M\" checked\u003e M\u003c/label\u003e\n    \u003clabel\u003e\u003cinput type=\"checkbox\" name=\"sizes\" value=\"L\" checked\u003e L\u003c/label\u003e\n  \u003c/div\u003e\n  ...\n\u003c/form\u003e\n```\n```javascript\nlet form = document.querySelector('#tshirtForm')\n\nlet sizes = getFormData.getFieldData(form, 'sizes')\n\nconsole.log(JSON.stringify(sizes))\n```\n```\n[\"M\", \"L\"]\n```\n\n### Trimming user input\n\nTo trim user input, pass a `trim: true` option to `getFormData()` or `getFieldData()`:\n\n```html\n\u003cform id=\"signupForm\"\u003e\n  ...\n  \u003clabel\u003eUsername:\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"username\" value=\"AzureDiamond  \"\u003e\n\n  \u003clabel\u003ePassword:\u003c/label\u003e\n  \u003cinput type=\"password\" name=\"password\" value=\" hunter2 \"\u003e\n  ...\n\u003c/form\u003e\n```\n```javascript\nlet form = document.querySelector('#signupForm')\n\nlet data = getFormData(form, {trim: true})\n\nconsole.log(JSON.stringify(data))\n```\n```\n{\"username\": \"AzureDiamond\", \"password\": \"hunter2\"}\n```\n\n### Including disabled inputs\n\nDisabled inputs are ignored by default; to include their data, pass an `includeDisabled: true` option to `getFormData()` or `getFieldData()`.\n\n```javascript\nlet data = getFormData(form, {includeDisabled: true})\n```\n\n### File Inputs\n\nWhere possible, data extracted from `\u003cinput type=\"file\"\u003e` will be native\n[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.\n\nIf the `.files` property is not available, the `.value` property will be used to provide data instead.\n\n## API\n\n### `getFormData(form: HTMLFormElement[, options: Object])`\n\nExtracts data from a `\u003cform\u003e`'s `.elements` collection - in order to use `.elements`, form inputs must have `name` or `id` attributes. Since multiple inputs can't have the same `id` and a `name` allows an input to qualify as a successful control for form submission, `name` attributes are preferred and will be given priority if both are present.\n\nThe following options can be configured:\n\n* `trim: Boolean` (default: `false`) - if `true`, leading and trailing whitespace will be trimmed from user input in text entry form inputs.\n* `includeDisabled: Boolean` (default: `false`) - if `true`, disabled inputs will not be ignored.\n\n#### Return type: `Object\u003cstring, boolean | string | string[] | File | File[]\u003e`\n\nProperties in the returned data object are mostly consistent with what would have been sent as request parameters if the form had been submitted:\n\n* Disabled inputs are ignored by default.\n* Text inputs will always contribute a value, which will be `''` if they are empty.\n* Checkbox inputs will only contribute a value if they are checked, in which case their `value` attribute will be used.\n* Form elements which represent multiple values (select-multiple, or multiple inputs with the same name, file inputs with `multiple`) will only contribute a value if they have at least one value to submit. Their values will always be held in an `Array`, even if there is only one.\n\nExceptions to this are:\n\n* If a checked checkbox doesn't have a `value` attribute, its value will be `true`. Normally it would default to `'on'` when submitted, but this isn't as useful a default on the client.\n* Buttons are completely ignored, as it's only possible to determine which button counts as successful after it's been used to submit the form.\n\n### `getFieldData(form: HTMLFormElement, fieldName: String[, options: Object])`\n\n\u003e `getFieldData()` is a named export when using ES modules, otherwise it's also available as `getFormData.getFieldData()`\n\nExtracts data for a named field from a  `\u003cform\u003e`'s `.elements` collection.\n\nOptions are as documented for `getFormData`.\n\n#### Return type: `null | boolean | string | string[] | File | File[]`\n\nThis function is used by `getFormData()`, so the documentation for individual return values above also applies.\n\n`null` will be returned if the field is non-existent, disabled, or shouldn't contribute a value (e.g. unchecked checkboxes, multiple selects with no selections, file inputs with no selections).\n\n## MIT Licensed\n\n[build-badge]: https://img.shields.io/travis/insin/get-form-data/master.svg?style=flat-square\n[build]: https://travis-ci.org/insin/get-form-data\n\n[npm-badge]: https://img.shields.io/npm/v/get-form-data.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/get-form-data\n\n[coveralls-badge]: https://img.shields.io/coveralls/insin/get-form-data/master.svg?style=flat-square\n[coveralls]: https://coveralls.io/github/insin/get-form-data\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fget-form-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fget-form-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fget-form-data/lists"}