Clone fotm

by amitava82

HTML

<link rel="stylesheet" href="http://taitems.github.com/Aristo-jQuery-UI-Theme/css/Aristo/Aristo.css">
<div class="cloneContainer">
    
<fieldset id="c-1" class="clone">
    <legend>Contact Information</legend>
    <label>Title</label><input type="text" name="name" id="name"/>
    <label>Phone</label><input type="text" name="phone" id="phone" class="phoneNo"/>
    <label>Fax</label><input type="text" name="fax" id="fax"/>
    <a href="#" class="cloneAdd">add</a>
    <a href="#" class="cloneDelete">delete</a>
</fieldset>
</div>


<script>

$.fn.zClone = function(){
    var $this = $(this);  
    var elementToCopy = $this.find('.clone').eq(0);
    //get fieldset ID
    var id = $(elementToCopy).attr('id');
    var prefix = id.split('-', 1);
    //remove delete button from 1st set
    $(elementToCopy).find('.cloneDelete').eq(0).hide();

    //click handler
    
   $('.cloneAdd, .cloneDelete', this).live('click',function(e){
   
    var btnClass = $(e.target).attr('class');
    var container = $(elementToCopy).parent();
    var noOfElement = $(container).children().length;
    var cloneElement = $(e.target).parent();
    
    if(btnClass  == 'cloneAdd'){
    
            var currentIndex = noOfElement +1;
            $(elementToCopy).clone().appendTo($this).find('.cloneAdd').hide()
            .next('.cloneDelete').show()
            .parent().attr('id', prefix+"-"+currentIndex) //assign unique id to fieldset
            .children('input').each(function(i, e){
                //set unique ID, name
                var name = $(e).attr('name') +currentIndex ;
                var id = $(e).attr('id') +currentIndex ;
                $(e).attr({name: name, id: id});
                //reset Value
                $(e).val('');
            })
            .end().find('legend').remove();
    
    
    //increment element id, name attribute
   
    }else if(btnClass  == 'cloneDelete'){
        if(noOfElement > 1){
            $(cloneElement).remove();
        }
    }else{return...

CSS

a {
    font-size: 12px;
    padding: 2px 10px;
    border: 1px solid #444444;
    background: #555555;
    color:#f7f7f7;
    text-decoration:none;
    vertical-align: middle;
}

a:hover{
    color:#ffffff;
    background:#111111;   
}
input[type="text"]{
    height:20px;
    padding-left:10px;
    padding-right:10px; 
    border:1px solid #cccccc;
    vertical-align: middle;
}
input[type="submit"]{
    margin-left:20px;
    border:none;
    background:#222222;
    outline:none;
    color:#ffffff;
    padding: 4px 10px;
    font-size:12px;
}

JavaScript

$('.cloneContainer').zClone();

$('.cloneContainer2').zClone();

$('#getValue').click(function(){
    var arr = {};
    $('.cloneContainer').find('input').each(function(){
        arr[this.name] = $(this).val();
    });
    
    console.log(arr);
});