{"id":21524890,"url":"https://github.com/degjs/formfieldappender","last_synced_at":"2025-03-17T18:17:52.952Z","repository":{"id":18675558,"uuid":"84963543","full_name":"DEGJS/formFieldAppender","owner":"DEGJS","description":"A module for adding and removing an infinite number of similar form fields to a form.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:44.000Z","size":2831,"stargazers_count":0,"open_issues_count":12,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-04-14T22:12:27.110Z","etag":null,"topics":["forms"],"latest_commit_sha":null,"homepage":"http://degjs.com/formFieldAppender","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEGJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-14T15:12:26.000Z","updated_at":"2021-01-26T19:14:31.000Z","dependencies_parsed_at":"2023-01-13T19:57:12.544Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/formFieldAppender","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformFieldAppender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformFieldAppender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformFieldAppender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformFieldAppender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/formFieldAppender/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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"],"created_at":"2024-11-24T01:30:22.136Z","updated_at":"2025-03-17T18:17:52.926Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# formFieldAppender\n![Run Tests](https://github.com/DEGJS/formFieldAppender/workflows/Run%20Tests/badge.svg)\n\nformFieldAppender is a Javascript module that allows you to add and remove an infinite number of similar form fields to a form.\n\n## Install\nformFieldAppender is an ES6 module. Consequently, you'll need an ES6 transpiler ([Babel](https://babeljs.io) is a nice one) as part of your Javascript workflow.\n\nIf you're already using NPM for your project, you can install formFieldAppender with the following command:\n\n```\n$ npm install @degjs/form-field-appender\n```\n\n## Usage\nImport formFieldAppender and create a new instance of it.\n```js\nimport formFieldAppender from '@degjs/form-field-appender';\n\nlet element = document.querySelector('div');\n\nlet instance = formFieldAppender(element);\n```\n\nBy default, formFieldAppender will search the supplied `element` for an item that matches the `itemClass` parameter to use as its blueprint.\n\nHowever, you can optionally provide either an HTML element or string representation of an HTML element as the item blueprint.\n\n#### As an HTML element:\n```js\nimport formFieldAppender from '@degjs/form-field-appender';\n\nlet element = document.querySelector('div');\nlet itemBlueprint = document.createElement('div');\n\nitemBlueprint.classList.add('phone-field__wrapper');\nitemBlueprint.insertAdjacentHTML('afterbegin', `\n    \u003clabel for=\"phone-field\"\u003eField\u003c/label\u003e\n    \u003cinput class=\"phone-field\" name=\"phone-field\" id=\"phone-field\" type=\"tel\"\u003e\n`);\n\nlet instance = formFieldAppender(element, {\n    blueprint: itemBlueprint\n});\n```\n\n#### As a string representation of an HTML element:\n```js\nimport formFieldAppender from '@degjs/form-field-appender';\n\nlet element = document.querySelector('div');\nlet itemBlueprint = `\n    \u003cdiv class=\"phone-field__wrapper\"\u003e\n        \u003clabel for=\"phone-field\"\u003eField\u003c/label\u003e\n        \u003cinput class=\"phone-field\" name=\"phone-field\" id=\"phone-field\" type=\"tel\"\u003e\n    \u003c/div\u003e\n`;\n\nlet instance = formFieldAppender(element, {\n    blueprint: itemBlueprint\n});\n```\n\n## Parameters\n\n### blueprint\nType: `HTMLElement` or `string`  \nAn HTML element or string representation of an HTML element that will be used as the blueprint for the repeating field.  \nDefault: null\n\n### itemClass\nType: `string`  \nThe class applied to each appended item.  \nDefault: `js-ffa-item`\n\n### addTriggerSelector\nType: `string`  \nThe selector for each item's add trigger.  \nDefault: `.js-ffa-add-trigger`\n\n### removeTriggerSelector\nType: `string`  \nThe selector for each item's remove trigger.  \nDefault: `.js-ffa-remove-trigger`\n\n### idPatternAttr\nType: `string`  \nThe attribute that contains the pattern that will be used to create each appended item's ID. A token of `[[itemIndex]]` in the pattern will be dynamically replaced by the item's current index, a token of `[[itemElIndex]]` will be replaced by the index of the element within the item, and a token of `[[index]]` will be replaced by a hyphenated combination of item and element index (i.e., `ffa-id-3-2` for the third element inside the fourth item).  \nDefault: `data-ffa-id-pattern`\n\n### namePatternAttr\nType: `string`  \nThe attribute that contains the pattern that will be used to create each appended item's `name` attribute. See `idPatternAttr` description for available token values.\nDefault: `data-ffa-name-pattern`\n\n### forPatternAttr\nType: `string`  \nThe attribute that contains the pattern that will be used to create each appended item's `for` attribute. See `idPatternAttr` description for available token values.  \nDefault: `data-ffa-for-pattern`\n\n### disabledClass\nType: `string`  \nThe class applied to an item when it's hidden/disabled. This class can be used to visibly hide disabled items with CSS.  \nDefault: `is-disabled`\n\n### initialReindex\nType: `number`  \nThe first index value applied to added items.  \nDefault: `1`\n\n### firstItemIsRemovable\nType: `boolean`  \nDetermines whether the first item can be removed.  \nDefault: `true`\n\n### onlyLastItemIsRemovable\nType: `boolean`  \nDetermines whether a \"remove\" trigger is added to all items, or only the last item.  \nDefault: `false`\n\n### onItemAddCallback\nType: `function` or `null`  \nAn optional callback that's fired whenever an item is added.  \nDefault: `null`\n\n### onItemRemoveCallback\nType: `function` or `null`  \nAn optional callback that's fired whenever an item is removed.  \nDefault: `null`\n\n### resetNewItemFormVals\nType: `boolean`  \nDetermines whether the fields in added items contain the values of the original item/template.  \nDefault: `true`\n\n\n## Methods\n\n### .destroy()\nParameters: none  \nDestroys the formFieldAppender instance.\n\n### .getItems()\nParameters: none  \nReturns an array of the items currently added to the formFieldAppender instance.\n\n\n\n## Browser Support\n\nformFieldAppender depends on the following browser APIs:\n+ Object.assign: [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill)\n+ Array.from: [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill)\n+ Element.closest: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill)\n\nTo support legacy browsers, you'll need to include polyfills for the above APIs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fformfieldappender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Fformfieldappender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fformfieldappender/lists"}