The old demo for this plugin can be found here: https://tristandenyer.com/demos/dynamic-form.html
Duplicate a whole section of a form
The new Bootstrap 3.4 demo for duplicating a whole section of a form can be found here: https://tristandenyer.com/demos/dynamic-form-bootstrap-3-0.html
Duplicate multiple elements independently (latest)
The new Bootstrap 3.4 demo supporting duplicating multiple elements independently can be found here: https://tristandenyer.com/demos/dynamic-form-bootstrap-3-3-4-multiple.html
A little history
I had a client who wanted to allow the user to dynamically add a section to their form. No problem, I thought. Then I noticed that the duplicated section was using the same name, id, and for attributes, which means that the resulting submission would not plug in nicely to the database.
First, I must give a huge thank you to charlie.griefer.com for his original code in the post “jQuery – Dynamically Adding Form Elements” It was exactly what I needed to start with. I then modified and added elements to get it to work in my form. Special thanks to those that posted in the comments section of Charlie’s page: David Goodman and “azrain” for help and inspiration.
Here’s the situation
- Charlie’s used jQuery 1.3.; whereas I needed to make sure this worked with 1.5.1. (ver 0.9.3 now uses 1.9.1)
- Charlie’s dynamic form only wrapped a single input. I needed to wrap an entire table inside a long form. (As of v.9, I am no longer using tables.)
- The original code duplicated the user’s inputs from the original form. I needed a fresh, empty form.
- The original code had a variable that sequentially numbered the 2 IDs and 1 name attribute on the new forms. But, it only had one input, no labels, and was using the :first selector to do so. This was not going to work in my situation where I needed to maintain the accessibility of matching the labels to the input attributes, and have it all sequentially numbered as the user added sections to the form.
In short, I needed to allow the user to add an empty form with unique IDs, names, and labels to maintain accessibility and work with the database.
Using input from the user comments on charlie.griefer.com, new jQuery selectors, and adding IDs to target the attributes I needed to sequence, I have rebuilt Charlie’s original code to suit my needs. Check out the demo here.
Future release plans
Below are my plans for the upcoming releases. If you have input on any of these functionalities, I would be happy to add your code and test it.
Assign focus to the first textarea of the added section, moving it up into the viewable area of the viewport.Tried it, and this just makes the experience a little odd in that it happens so fast the form looks like it is clearing instead of adding a section. Ver 0.9.3 now has focus on the first select in the duplicated field, but no slide into view.
- auto tab
One of my main problems was targeting the for, name, and IDs so that I could have them become sequentially numbered with each additional form. I ended up having to create unique IDs on the td, but am hoping one of you know of a better and more efficient way to do this. Simply targeting input or select in the jQuery selector didn’t work for me. And yes, I used a table because the original client this was built for requested it. A future version will do this using a table-less form.
Previous version 0.9.3 download here »
Previous version 0.9.2 download here »
Previous version 0.9.1 download here »
Previous version 0.9 download here »
Previous version 0.8 download here »
Previous version 0.7 download here »
Previous version 0.6 download here »
Previous version 0.5 download here »
Since I am not yet a tenth degree blackbelt in jQuery, I would appreciate any and all input regarding the script and code, especially in how we can write it more efficiently.
Your input is always welcome: contact me or, better yet, leave a comment below.