(Last updated : 06th March 2010)
jQuery plugin to add multiple fields on the fly on web page using javascript
This plugin is really easy to implement with cool options like:
linkText
linkClass
enableRemove
removeLinkText
removeLinkClass
confirmOnRemove
confirmationMsgOnRemove
addEventCallback
removeEventCallback
maxItemsAllowedToAdd
maxItemReachedCallback
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)?',
addEventCallback: null,
removeEventCallback: null,
maxItemsAllowedToAdd: null,
maxItemReachedCallback: null
Note: Please bear with me its still under constructions and (Released!! My project is live now for which I made this plugin) The examples are to
get more inputs from friends and visitors to make it better. Feel free to contact me for your
precious feedback/suggestions and complaints as well! :)
So what this plugin actualy does: It helps to copy a field or set of fields and make
a clone of it with functionality to add more or remove added field(s). The example
below will help you to understand better.
example:
$(document).ready(function () {
$(".addressDetails,.questionDetails").EnableMultiField();
$("#getMeCount1").click(function () {
alert($(".addressDetails").attr("TotalFieldsAdded"));
return false;
});
$("#getMeCount2").click(function () {
alert($(".questionDetails").attr("TotalFieldsAdded"));
return false;
});
$("#getMeCount3").click(function () {
alert($(".Birds").attr("TotalFieldsAdded"));
return false;
});
$(".Birds").EnableMultiField({
addEventCallback: addFlickrImage,
enableRemove: true,
linkClass: "addImage",
linkText: "Fetch new",
removeLinkText: "Hide this",
removeLinkClass: "removeImage",
maxItemsAllowedToAdd: 15,
confirmOnRemove: false,
maxItemReachedCallback: function (elem) {
$(elem).find(".addImage").hide();
}
});
});
function addFlickrImage(elem, mainElem) {
curElm = $(elem);
$(curElm).find(".imgBird").attr("src", "throbber.gif");
$(curElm).find(".imgBird").attr("alter", "Loading..");
if (typeof flickrImages == 'undefined') {
$(elem).find(".addImage").after("Loading.. ");
$(elem).find(".addImage").hide();
$(elem).find(".removeImage").hide();
var jp = document.createElement('script');
jp.setAttribute('type', 'text/javascript');
jp.setAttribute('src', 'http://api.flickr.com/services/feeds/photos_public.gne?tags=water birds&tagmode=any&format=json&jsoncallback=setImage');
document.getElementsByTagName('head')[0].appendChild(jp);
}
else {
$(curElm).find(".imgBird").attr("src", flickrImages.items[Math.floor(Math.random() * (flickrImages.items.length))].media.m);
$(curElm).find(".imgBird").attr("alter", flickrImages.items[Math.floor(Math.random() * (flickrImages.items.length))].media.title);
$(curElm).find(".loadingmsg").remove();
$(curElm).find(".addImage").show();
$(curElm).find(".removeImage").show();
}
}
function setImage(d) {
flickrImages = d;
$(curElm).find(".imgBird").attr("src", d.items[Math.floor(Math.random() * (d.items.length))].media.m);
$(curElm).find(".imgBird").attr("alter", flickrImages.items[Math.floor(Math.random() * (flickrImages.items.length))].media.title);
$(curElm).find(".loadingmsg").remove();
$(curElm).find(".addImage").show();
$(curElm).find(".removeImage").show();
}
An example of contact details
Contact details
Name
Address
Get me count of total contact forms added
