Duplicator 0.9.1

Allow elements group duplication, i.e. create dynamically input controls into your web pages without reloads, based on a "model". This mini-library is useful in applications in which is necessary to capture any number of items (such as order items, single catalogs, quotations, and others).

Versión en español [No actualizada]

Features

• Duplicate any number of controls and html elements.
• Automatic name and id attributes of new elements.
• Fully JavaScript, i.e. compatible with any server-side language.
• Easy setup.

Use

First, you need an input type-hidden (named the counter) into your form, as following example:

<form action="foo"> <input type="hidden" name="counter1" id="counter1" value="1"> ... </form>

The id attribute is mandatory, and the initial value corresponds to the number of duplicable groups (the "model" as we'll see below).

Next step is to assign an id to the parent tag of the new groups, and one id for the "model" to duplicate. Following example shows this idea, in which we have a table (the parent container of new elements) and the second table row is the model:

<form action="foo"> <input type="hidden" name="counter1" id="counter1" value="1"> <table> <thead> <tr> <td>Name</td> <td>Age</td> </tr> </thead> <tbody id="container1"> <!-- <----- The container --> <tr id="model1"> <!-- <----- The model --> <td> <input type="text" name="eName1"> </td> <td> <input type="text" name="eAge1"> </td> </tr> </tbody> </table> ... </form>

Is a good idea to put a numeric postfix in the name attribute of controls (in this case, is the number 1) in order to generate consecutive names.

And finally, you need to call the addNewElementsGroup() function, for example, with an input type button:

<form action="foo"> ... <input type="button" value="Add other" onclick="addNewElementsGroup('container1', 'model1', 'counter1', false, 'input')"> </form>

First parameter correspond to a string with the id of the container; second one is the id of the model to duplicate. Third is the id of the input type-hidden that works as counter. Fourth parameter indicates if you want to keep the values at the model group (for example, if you have predefined values into your input text). Last arguments correspond to the tag name of the control that will receive the focus in the new group. Next section will show the example in action.

Examples

The example described in last section:

If you're using FireFox, at "Tools" menu, with "Page Information" command, you can see new elements created in the page. You'll see that new controls names are unique.

Now, the same example with keep values option:

And finally, an example with more complex options. In this case, the model includes a select tag with some options, and the second input uses the onchange event to validate the user input.

Notes

• If you're going to use this library, please send me an e-mail, and would be great if you include a photo of your city :) (se habla español)
• This mini-library works in *real* browsers (i.e. Mozilla family). I don't known about IE, and it doesn't matter for me.

Bugs

• Tags with text and other tags as children are not duplicated. For example: <td>Name:<input type="text"></td>, won't be duplicated correctly. You can use a tricky solution: <td><span>Name:</span><input type="text"></td>

Download

Here's a tgz file with source and examples.

Author

By: Hugo Ortega Hernández - hugorteg{drop-this-text}@gmail.com