I have spent a couple of months working with huge and complex forms in which a lot of groups of form elements need to be duplicated and their attributes incremented, various conditions met etc. As a result I have written a JS class that facilitates cloning process: you just define HTML block patterns assigning them unique names (IDs), create target/destination points in your HTML page and your're done. The Cloner class does all the rest: it properly increments ID and NAME attributes found within new clones, let's you nest clones within clones to an unlimited depth, adds deletion links and attaches event listeners to cloning and clone deletion links etc. A whole bunch of parameters you can change, four callback functions you can declare to fully control the cloning process, no need to mix HTML code with JavaScript. As it's just JS and I can't actually hide the code anyway, I decided to share it with others - it's available online under the LGPL license. You can download it at http://cloner.sourceforge.net/ . A simple tutorial with examples in contained within the ZIP file, but you can have a look at it online at http://niebiarz.eu/free/cloner_1_0.php?basics_functions .
Probably the most useful feature is a possibility of nesting clones and submitting NAME values as a properly structured, multidimentional array you can easily parse on the server side - you can test it at http://niebiarz.eu/free/cloner_1_0.p...ing_targets_ex . I'm planning to add new features, like forcing clone number or attaching a user defined class to a clone, so that it receives a new appearence (or is hidden) right away, without the need to resort to post-clone callback function. Have fun. |
