jQuery Plugin To Duplicate Form Groups - addMore
File Size: | 33.6 KB |
---|---|
Views Total: | 4312 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery based form builder plugin which allows to dynamically add and remove a repeatable group of form elements.
How to use it:
1. Download and include the jQuery addMore plugin after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/addMore.js"></script>
2. Wrap the html elements you want to duplicate into an element.
<form action=""> <p> <span>add more</span> <input type="text" placeholder="name"> <select class="removeDuplication"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </p> </form>
3. That's it. The plugin will automatically generate add / remove buttons to duplicate / delete specified form elements.
4. Available options and callback events.
addText: 'add more', removeText: 'Remote', selectBoxDuplicate: true, avoidDuplicationSelection: function(e) { var o = e; if ($.inArray($(o).val(), selectedValue) != -1) { $(o).val(singlePreSelectedValue); alert('Value already selected.'); } else { var hasSelectValue = true; /*dif = $.Deferred();*/ $.each($('.removeDuplication'), function(i, v) { if ($(this).val() == 'select') { hasSelectValue = false; return false; } /*if (i == ($('.removeDuplication').length - 1)) { dif.resolve(); }*/ }); /*dif.done(function() { if (hasSelectValue) { $('[data-id="more"]').show(); } })*/ } }, prevSelectedValue: function(e) { var o = e; selectedValue = []; $.each($('.removeDuplication'), function(i, v) { if ($(this).val() != 'select') { selectedValue.push($(this).val()); } }); singlePreSelectedValue = $(o).val(); }
This awesome jQuery plugin is developed by only1shirish. For more Advanced Usages, please check the demo page or visit the official website.