Makes form elements duplicateable.
The script duplicates an element in a form. The object to to have a single script work for any number of elements, and have a minimum impact on the HTML form. This document explains how to make use of the script, but see the example folder for a more detailed use.
Known bug: putting a cloneable element inside a cloneable element doens't work yet.
- Live example: http://geekwagon.net/projects/cloneableElements/example
- github: https://github.com/deplicator/CloneableElements
Whatever group of elements you want to duplicate will need to be put inside an element with the class="cloneable". There can be any number of decendats.
The cloneable class element element can have a limit attribute that accepts a number (example limit="5"). This is how many times the element can be duplicated. Without this attribute the limit is 100 (and that can even be changed inthe script).
Duplicated elements will be the same as class and an incremented id. All id's name attributes found within the cloneable element will have a number appended to them. This is done so the duplicated input fields can be captured with the form action. For example, the name="box" will become name="box2" in the first duplicate, name="box3" in the second, and so on. This is true of all name attributes, so it will work for <select> or any element name is used.
The script inserts add and remove buttons automatically if they're not found. If you want to use your own values other than add and remove, you can insert the buttons in your html manually. The buttons should be the last two children inside the cloneaeble class.
<input type="button" class="addButton" value="insert field" /> <input type="button" class="remButton" value="delete field" />
The script relies on the button's classes to remain the same.
- Cloneable inside cloneable doesn't work, that could be neat.