Hello friends I have already published easy and simple tutorials on how to dynamically add form fields using jQuery and then how to submit those dynamic fields data to database. I got good response for both the tutorials so I thought to share something more on the same topic. This post is dedicated to a cool jQuery plugin named cloneya which can be used to clone DOM elements easily. Yes you don’t need to write lines of java script, this plugin will handle all the nasty things for you. You can now easily clone form fields, group of form fields or even entire form easily with this plugin on the fly. Thanks to Sourabh Shukla for this wonderful plugin.
Lets learn how you can use this plugin in your projects to build some cool stuffs. This plugin offers a function cloneya() and this function is smart enough to do its job of cloning DOM elements.
One of the easiest possible way to use this plugin is use default markup for cloning of form fields. Lets understand basic use from following code:
</p> <div class="clone-wrapper"> <div class="toclone"> // your forms code here <div class="clone">+</div> <div class="delete">-</div> </div> </div> <script> $('clone-wrapper').cloneya(); </script> <p style="text-align: justify;">
Here classes “toclone” , “clone” and “delete” will be automatically recognized by plugin. Class “toclone” defines boundary for clonable items, you need to wrap all of these in an outer container and use cloneya() function as done in above code.
Note: You can also bind clone_clone and clone_delete events to elements outside clonable wrapper to get this plugin working.
You must check the official version of the demo to see various possibilities with this plugin. This demo shows you simple cloning, nested cloning, Animated cloning on custom event and limit number of maximum clones. I hope this simple plugin will make your life a lot easier when it comes to clone your DOM elements. Let me know in comments how you can utilize this plugin in your web projects and I would also love to know if you use any other plugin for cloning your form fields. Share this posts with your friends and followers.