jQuery Plugin To Duplicate Form Groups - addMore
| File Size: | 33.6 KB |
|---|---|
| Views Total: | 4335 |
| 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.











