├── .gitignore
├── ES6-JavaScript
├── README.md
├── demo.html
├── index.js
└── package.json
├── LICENSE
├── README.md
├── clone-demo-rollup-js
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── public
│ └── index.html
├── rollup.config.js
└── src
│ └── main.js
├── css
└── styles.css
└── jQuery
├── dynamic-form-bootstrap-3-0.html
├── dynamic-form-bootstrap-3-3-4-multiple.html
├── dynamic-form-bootstrap-4-0-multiple.html
├── dynamic-form-bootstrap-4-0.html
├── dynamic-form.html
└── js
├── clone-form-td-multiple.js
├── clone-form-td.js
└── jquery-1.11.2.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Compiled source #
2 | ###################
3 | *.com
4 | *.class
5 | *.dll
6 | *.exe
7 | *.o
8 | *.so
9 |
10 | # Packages #
11 | ############
12 | # it's better to unpack these files and commit the raw source
13 | # git has its own built in compression methods
14 | *.7z
15 | *.dmg
16 | *.gz
17 | *.iso
18 | *.jar
19 | *.rar
20 | *.tar
21 | *.zip
22 |
23 | # Logs and databases #
24 | ######################
25 | *.log
26 | *.sql
27 | *.sqlite
28 |
29 | # OS generated files #
30 | ######################
31 | .DS_Store
32 | .DS_Store?
33 | ._*
34 | .Spotlight-V100
35 | .Trashes
36 | Icon?
37 | ehthumbs.db
38 | Thumbs.db
--------------------------------------------------------------------------------
/ES6-JavaScript/README.md:
--------------------------------------------------------------------------------
1 | # Duplicate a section of a form, maintaining accessibility (a11y)
2 |
3 | Using plain JavaScript (ES6), you can now duplicate a section of a form (as well as destroy the last cloned section), the whole form, or just one or two inputs. This also allows the user to add an empty form section with unique, iterative `ID`, `for`, `name`, and `label` to maintain accessibility (a11y) and work with the database.
4 |
5 | If you prefer, the index.js file is well-commented.
6 |
7 | ## jQuery version
8 |
9 | There's a [jQuery version](https://github.com/tristandenyer/clone-section-of-form-ES6-or-jQuery/tree/master/jQuery "jQuery version"), if you are into that kind of thing. It's been in development since June 2013, and is more stable, at the moment.
10 |
11 | ## ES6 JavaScript version
12 |
13 | This [ES6 version](https://github.com/tristandenyer/clone-section-of-form-ES6-or-jQuery/tree/master/ES6-JavaScript "ES6 version") was a direct port over from the jQuery version. While it's functionaly the same as the jQuery version, there are some notable todos and refactoring that needs to be done before it can be used in production environments.
14 |
15 | ## Capabilities
16 |
17 | This cloning script is built to:
18 |
19 | - allow a user to duplicate a section (one or more inputs) of a form
20 | - _not_ duplicate the user’s inputs from the original section, but show a fresh, empty section below the original
21 | - stop a user from adding new sections at a specified integer (default is 5 total)
22 | - maintain the accessibility of matching the labels to the input attributes, even after cloning
23 | - increment the updated `for`, `id` and `name` attributes (ID2*, ID3*, ID4\_) so as to be unique pairs
24 | - be customizable to work with your existing form
25 |
26 | This is _not_ a drop-in-and-it-works solution. You can see in the index.js file that we depend on querying for classnames to update the `for`, `id` and `name` attributes of inputs, among other things.
27 |
28 | ## How it works
29 |
30 | 1. you wrap the section you want to allow to be cloned with a div with a class of `clonedInput`.
31 | 2. on click, we clone that section and all of its children nodes
32 | 3. then we increment a number variable (to keep track of sections; `for`, `id` and `name` attributes; removing sections...)
33 | 4. increment the `for`, `id` and `name` attributes (ID2*, ID3*, ID4\_) of inputs
34 | 5. set all input values to null
35 | 6. insert the cloned and updated section after the previous
36 | 7. check if we are at the max allowable sections, and update buttons accordingly
37 |
38 | ## Form field support
39 |
40 | This is currently supporting the cloning of:
41 |
42 | - `` type="text"
43 | - `` type="checkbox"
44 | - `` type="radio"
45 | - `