{"id":13554239,"url":"https://github.com/crapthings/lodash-form-collector","last_synced_at":"2025-08-14T00:06:58.288Z","repository":{"id":143886931,"uuid":"88259471","full_name":"crapthings/lodash-form-collector","owner":"crapthings","description":"a form collector powered by lodash that support any frontend framework.","archived":false,"fork":false,"pushed_at":"2019-02-21T09:55:32.000Z","size":538,"stargazers_count":97,"open_issues_count":11,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-09T10:12:15.497Z","etag":null,"topics":["form","lodash"],"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/crapthings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-04-14T10:41:53.000Z","updated_at":"2025-01-24T15:25:34.000Z","dependencies_parsed_at":"2023-07-26T09:45:36.808Z","dependency_job_id":null,"html_url":"https://github.com/crapthings/lodash-form-collector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/crapthings/lodash-form-collector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crapthings%2Flodash-form-collector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crapthings%2Flodash-form-collector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crapthings%2Flodash-form-collector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crapthings%2Flodash-form-collector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crapthings","download_url":"https://codeload.github.com/crapthings/lodash-form-collector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crapthings%2Flodash-form-collector/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269739933,"owners_count":24467746,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["form","lodash"],"created_at":"2024-08-01T12:02:42.879Z","updated_at":"2025-08-14T00:06:58.244Z","avatar_url":"https://github.com/crapthings.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# lodash-form-collector\n\n[![NPM](https://nodei.co/npm/lodash-form-collector.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/lodash-form-collector/)\n\n[demo](https://meteor-njccsympez.now.sh/)\n\n## installation\n\n\u003e npm i -S lodash-form-collector\n\n#### import\n\n```js\nimport lfc from 'lodash-form-collector'\nconst lfc = require('lodash-form-collector')\n```\n\n## usage\n\n```js\nconst form = document.getElementById('form')\nconst data = lfc(form)\nconsole.log(data)\n```\n\n## changelog\n\n#### 0.0.4\n\n\u003e if you don't specify 'data-type' on input[type='checkbox'], the default data-type is set to 'boolean'. this change allow you to collect value as 'true' or 'false' as default.\n\n[HTML: Checkbox default value ](https://stackoverflow.com/questions/12911787/html-checkbox-default-value)\n\n```\n### \u003e= 0.0.4\n\u003cinput type='checkbox' name='isEnabled' checked /\u003e\n{ isEnable: true }\n\u003cinput type='checkbox' name='isEnabled' /\u003e\n{ isEnable: false }\n\n### \u003c 0.0.4\n\u003cinput type='checkbox' name='isEnabled' checked /\u003e\n{ isEnable: 'on' }\n\u003cinput type='checkbox' name='isEnabled' /\u003e\n{}\n```\n\n### basic collecting\n------\n\n#### html\n\n```html\n\u003cform id=\"form\"\u003e\n  \u003cinput type=\"text\" name=\"username\" value='crapthings' /\u003e\n  \u003cinput type=\"password\" name=\"password\" value='secret' /\u003e\n  \u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### result\n\n```js\n{\n  username: 'crapthings',\n  password: 'secret'\n}\n```\n\n### collect nested field\n------\n\n\u003e Sets the value at path of object. If a portion of path doesn't exist, it's created.\n\u003e Arrays are created for missing index properties while objects are created for all other missing properties.\n\n#### html\n\n```html\n\u003cform id=\"form\"\u003e\n  \u003cinput type=\"text\" name=\"something\" value=\"anything\" /\u003e\n  \u003cinput type=\"text\" name=\"profile.displayName\" value=\"crapthings\" /\u003e\n  \u003cinput type=\"text\" name=\"profile.address.city\" value=\"harbin\" /\u003e\n  \u003cinput type=\"number\" name=\"profile.age\" value=\"32\" /\u003e\n  \u003cinput type=\"radio\" name=\"profile.gender\" value=\"male\" checked /\u003e\n  \u003cinput type=\"radio\" name=\"profile.gender\" value=\"female\" /\u003e\n  \u003cinput type=\"text\" name=\"array[0]\" value=\"string1\" /\u003e\n  \u003cinput type=\"text\" name=\"array[1]\" value=\"string2\" /\u003e\n  \u003cinput type=\"text\" name=\"sameName\" value=\"text with same name\" /\u003e\n  \u003cinput type=\"text\" name=\"sameName\" value=\"will be collect as array\" /\u003e\n  \u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### result\n\n```js\n{\n  something: 'anything',\n  profile: {\n    displayName: 'crapthings',\n    address: {\n      city: 'harbin'\n    },\n    age: 32,\n    gender: 'male'\n  },\n  array: ['string1', 'string2'],\n  sameName: ['text with same name', 'will be collect as array']\n}\n```\n\n### single checkbox with unique name\n------\n\n\u003e if there's a single checkbox that you want to use String as value, just write your input as normal.\nwhen it has checked, the value will present at the form result, when unchecked it won't present at result.\n\n\u003e if there's a single checkbox that you want to use as Boolean, give your input an data attr data-type=\"boolean\",\nchecked = true, unchecked will collect as false.\n\n#### html\n\n```html\n\u003cform id=\"form\"\u003e\n  \u003cinput type=\"checkbox\" name=\"useValue\" value=\"check me\" checked /\u003e\n  \u003cinput type=\"checkbox\" name=\"bypassUnchecked\" value=\"will not collect me\" /\u003e\n  \u003cinput type=\"checkbox\" name=\"unchecked\" data-type=\"boolean\" /\u003e\n  \u003cinput type=\"checkbox\" name=\"deep.checked\" data-type=\"boolean\" checked /\u003e\n  \u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### result\n\n```js\n{\n  useValue: 'check me',\n  unchecked: false,\n  deep: {\n    checked: true\n  }\n}\n```\n\n### multiple form controls with same name\n------\n\n\u003e if there're multiple inputs like text that have same name.\nit will be collecting as array, when no values are given, it gives an empty array [].\n\n\u003e if there're multiple checkboxes that you want to use String as value. just write your input as normal.\nwhen it has checked, the value will present at the form result.\nwhen all inputs unchecked it will be an empty array [].\n\n#### html\n\n```html\n\u003cform id=\"form\"\u003e\n  \u003cinput type=\"text\" name=\"emptyArray\" /\u003e\n  \u003cinput type=\"text\" name=\"emptyArray\" /\u003e\n  \u003cinput type=\"email\" name=\"emails\" value=\"crapthings@gmail.com\" /\u003e\n  \u003cinput type=\"email\" name=\"emails\" value=\"crapthings@163.com\" /\u003e\n  \u003cinput type=\"checkbox\" name=\"checkbox\" value=\"a\" checked /\u003e\n  \u003cinput type=\"checkbox\" name=\"checkbox\" value=\"b\" checked /\u003e\n  \u003cinput type=\"checkbox\" name=\"checkbox\" value=\"c\" /\u003e\n  \u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### result\n\n```js\n{\n  emptyArray: [],\n  emails: ['crapthings@gmail.com', 'crapthings@163.com'],\n  checkbox: ['a', 'b'],\n}\n```\n\n### data type conversion\n------\n\n\u003e you can turn string to number or array by using data-type=\"number || array || [number]\".\ntext, textarea, search, hidden, select are supported.\n\n\u003e [string separator]: text. search, hidden, options of select is ',' and textarea is '\\n' by default,\nyou can use optional by data-separator=\"separator\".\n\n#### html\n\n```html\n\u003cform id=\"form\"\u003e\n  \u003cinput type=\"text\" name=\"textString\" value=\"100\" /\u003e\n  \u003cinput type=\"text\" name=\"textStringToNumber\" value=\"100\" data-type=\"number\" /\u003e\n  \u003cinput type=\"text\" name=\"textStringToArray\" value=\"100, 200, 300, 400, 500\" data-type=\"array\" /\u003e\n  \u003cinput type=\"text\" name=\"textStringItemOfArrayToNumber\" value=\"100, 200, 300, 400, 500\" data-type=\"[number]\" /\u003e\n  \u003cinput type=\"text\" name=\"textStringItemOfArrayToNumberBySpace\" value=\"100 200 300 400 500\" data-type=\"[number]\" data-separator=\" \" /\u003e\n  \u003cinput type=\"hidden\" name=\"hiddenString\" value=\"100\" /\u003e\n  \u003cinput type=\"hidden\" name=\"hiddenStringToNumber\" value=\"100\" data-type=\"number\" /\u003e\n  \u003cinput type=\"hidden\" name=\"hiddenStringToArray\" value=\"100, 200, 300, 400, 500\" data-type=\"array\" /\u003e\n  \u003cinput type=\"hidden\" name=\"hiddenStringItemOfArrayToNumber\" value=\"100, 200, 300, 400, 500\" data-type=\"[number]\" /\u003e\n  \u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### result\n\n```js\n{\n  \"textString\": \"100\",\n  \"textStringToNumber\": 100,\n  \"textStringToArray\": [\"100\", \"200\", \"300\", \"400\", \"500\" ],\n  \"textStringItemOfArrayToNumber\": [100, 200, 300, 400, 500],\n  \"textStringItemOfArrayToNumberBySpace\": [100, 200, 300, 400, 500],\n  \"hiddenString\": \"100\",\n  \"hiddenStringToNumber\": 100,\n  \"hiddenStringToArray\": [\"100\", \"200\", \"300\", \"400\", \"500\"],\n  \"hiddenStringItemOfArrayToNumber\": [100, 200, 300, 400, 500]\n}\n```\n\n## TODOS\n\n- [ ] add feature data-type='object || [object]' ?\n- [ ] file to base64\n\n## FAQ\n\n## alternative\n\n[form2js](https://github.com/maxatwork/form2js)\n\n[jQuery Serialize Object](https://github.com/macek/jquery-serialize-object)\n\n## might be useful\n\n[dot-object](https://github.com/rhalff/dot-object)\n\n[object-path](https://github.com/mariocasciaro/object-path)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrapthings%2Flodash-form-collector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrapthings%2Flodash-form-collector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrapthings%2Flodash-form-collector/lists"}