jDupIt

Hi everyone
Today Im gonna show you my latest plugin(This one is in jquery:D)
So what does this plugin do?
It’s not really a plugin but an object that your form extends it then you can duplicate your fields remove them or add n number of them
Let see the object code


var jDupIt = {
fieldsElement: null,
initialize: function() {
newElement = $('#outer-fields-div').children('div.fields-div:first').clone();
newElement.hide();
this.fieldsElement = newElement;
},
addOne: function() {
newElement = this.fieldsElement.clone();
$('#outer-fields-div').append(newElement);
newElement.slideDown('slow');
},
bindAddOne: function(clickElement) {
formObj = this;
$(clickElement).click(function(){formObj.addOne()});
},
bindAddN: function(clickElement, inputElement) {
formObj = this;
$(clickElement).click(function(){
for (i = 0 ; i < $(inputElement).val() ; i++)
formObj.addOne();
});
},
bindRemoveCurrent: function(clickElement) {
$(clickElement).live('click', function(){
$(this).parents('div.fields-div').slideUp('slow', function(){$(this).remove()});
});
},
bindRemoveLast: function(clickElement) {
$(clickElement).click(function(){
$('#outer-fields-div').children('div.fields-div:last').slideUp('slow', function(){$(this).remove()})
});
}
};

And here is the html code

<form id=”factor-form” method=”post”>
<label>Factor Num: </label>
<input name=”num_fac” type=”text” />
<label>Address: </label>
<input name=”address” type=”text” />
<div id=”outer-fields-div”>
<div class=”fields-div”>
<label>Referencia: </label>
<input name=”references[]” type=”text” />
<label>Precio </label>
<input name=”prices[]” type=”text” />

<a>
<img src=”images/cross.png” width=”16″ height=”16″ border=”0″ />
</a>
</div>
</div>
<input type=”submit” value=”ok” name=”submit” />
</form>
<!– Controls –>
<div id=”controls”>
<div id=”add”><a><span>Add One</span></a></div>
<div id=”remove”><a><span>Remove</span></a></div>
<div id=”add-n-div”>
<div id=”add-n”><a><span>Add</span></a></div>
<input id=”add-n-num” type=”text” size=”4″ /> products
</div>
</div>
<!– /Controls –>

Be careful

You can name every element as you like but 2 of them

<div id=”outer-fields-div”>
<div class=”fields-div”>

The first one is to know where the dynamic fields are and the second one is to know which fields to duplicate

Which means the second one contains the dynamic fields and the first one contains nothing or one or more blocks of second one

So what should you do to use the object?

element = $('#factor-form');
jQuery.extend(element, jDupIt);

First your form extends jDupIt then you bind the buttons or links to the actions


element.initialize();
element.bindAddOne('#add');
element.bindAddN('#add-n', '#add-n-num');

(#add-n-num is the id of the input that indicates the number of times that you want to duplicate the fields)

element.bindRemoveCurrent('.remove-current');
element.bindRemoveLast('#remove');

Do not forget to call element.initialize since it’s necessary
I hope this plugin be helpful for you

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: