jQuery plugin to add multiple fields on the fly on web page - Version 2

• linkText
• linkClass
• enableRemove
• removeLinkText
• removeLinkClass
• confirmOnRemove
• confirmationMsgOnRemove
• beforeAddEventCallback (new)
• addEventCallback
• removeEventCallback
• maxItemsAllowedToAdd
• maxItemReachedCallback
• data (new)

Default options

        linkText: 'Add more',
        linkClass: 'addMoreFields',
        enableRemove: true,
        removeLinkText: 'Remove',
        removeLinkClass: 'removeFields',
        confirmOnRemove: true,
        confirmationMsgOnRemove: 'Are you sure you wish to remove selected field(s)?',
        beforeAddEventCallback: null,
        addEventCallback: null,
        removeEventCallback: null,
        maxItemsAllowedToAdd: null,
        maxItemReachedCallback: null,
        data: []

Examples:

• Default Settings
• Data binding (Edit mode)
• Event binding to new generated elements

Sample of default settings

$(document).ready(function() {
  $("#itemDetails").EnableMultiField();
});
        

Sample of edit mode(with selected data by default)

$("#itemDetailsEdit").EnableMultiField({
 data:[{
        itemName : "Test", // All these properties needed to be set as "recname" attribute of each input you want to set value to
        itemGaylords : "2",
        itemDesc : "Test Desc",
        itemDrpPackagingTypes : "4"
 },
 {
        itemName : "Test 2",
        itemGaylords : "3",
        itemDesc : "Test Desc 3",
        itemDrpPackagingTypes : "5"
 }
 ,
 {
        itemName : "Test 3",
        itemGaylords : "4",
        itemDesc : "Test Desc 4",
        itemDrpPackagingTypes : "12"
  }]
 });
});
  

Sample of event binding to new generated fields (It attaches calendar to date fields dynamically)

$("#itemDetailsEvent").EnableMultiField({
 addEventCallback : function(newElem, clonnedFrom){
  newElem.find("input.date").datepicker({
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
  });
 }
});