GitHub - i-stone/fieldsaddmore: Simple jquery plugin for form fileds addmore

Fields addmore Plugin in jQuery

First include .js file

<script src="js/jquery.min.js"></script>
<script src="js/jqery.fieldsaddmore.min.js"></script>

Default Example

<!-- Main element container -->
<div class="admore-fields">
</div>
<!-- Add more button -->
<a href="#" class="fieldsaddmore-addbtn">Add more</a>

<!-- Addmore template -->
<script id="fieldsaddmore-template" type="text/template">
    <div class="fieldsaddmore-row rowId">
        <input type="text" name="items[key][field1]" />
        <input type="text" name="items[key][field2]" />
        <input type="text" name="items[key][field3]" />
        <a href="#" data-rowid="key" class="fieldsaddmore-removebtn">Remove</a>
    </div>
</script>

//Simple plugin implementation
$('.admore-fields').fieldsaddmore();

Custom Example

<!-- Main element container -->
<div class="admore-fields2">
</div>
<!-- Add more button -->
<a href="#" class="fieldsaddmore-addbtn2">Add more</a>

<!-- Addmore template -->
<script id="fieldsaddmore-template2" type="text/template">
    <div class="fieldsaddmore-row2 rowId">
        <input type="text" name="items2[key][field1]" />
        <input type="text" name="items2[key][field2]" />
        <input type="text" name="items2[key][field3]" />
        <input type="text" name="items2[key][field4]" />
        <a href="#" data-rowid="key" class="fieldsaddmore-removebtn2">Remove</a>
    </div>
</script>

//Imlementation with different elements and callback function
$('.admore-fields2').fieldsaddmore({
    templateEle: "#fieldsaddmore-template2",
    rowEle: ".fieldsaddmore-row2",
    addbtn: ".fieldsaddmore-addbtn2",
    removebtn: ".fieldsaddmore-removebtn2",
    min: 1,
    callbackBeforeInit: function(ele, options) {
        console.log('BeforeInit');
    },
    callbackBeforeAdd: function(ele, options) {
        console.log('Before Content Add');
    },
    callbackAfterAdd: function(ele, options) {
        console.log('After Content Add');
    },
    callbackBeforeAddClick: function(ele, options) {
        console.log('Before Add Click');
    },
    callbackAfterAddClick: function(ele, options) {
        console.log('After Add Click');
    },
    callbackBeforeRemoveClick: function(ele, options) {
        console.log('Before Remove Click');
    },
    callbackAfterRemoveClick: function(ele, options) {
        console.log('After Remove Click');
    }
});