Using Arrays as Field Names

[eluser]Ninjabear[/eluser]
[quote author="webdevguy" date="1290703879"]I just posted my solution to this problem on my blog at Expandable Input Block In CodeIgniter. It has a working demo and has the ability for useragents to return at a later date and update their entries.

I used really basic JavaScript validation in addition to CodeIgniter's validation since CI's error messages were not showing up inline (an absolute necessity in this case since the form could get very long if the users decided to add, say, 50 input blocks).

If someone wants to refactor my JQuery into a plug-in and/or improve the front-end validation I would be grateful.[/quote]

It's funny you should write this actually. I needed this exact thing for Jquery when I built my site a few months ago (www.fixilink.com). I'll definitely have a look at your solution as well, could be simpiler.

I ended up with this piece of code:

Code:

$(function()
{
    //Add section
    var count = $(".duplicates").length;
    var addType=$("#addType").attr("value");
    
    $("#add_more").click(function() {
            if(count>4)//No more than 5
            {
                $(this).css("background-color","#e90189");
                $(this).css("color","#ffffff");
                $(this).text("Limit Reached");
                return false;
            }
            var existing = $("#duplicate_"+count);
            var theClone = existing.clone(1).hide().insertAfter(existing);//Clone elements//Hide duplicate
            count++;//Increment counter

            theClone.attr("id","duplicate_" + count);//Select item for cleaning / adding.

            $("#duplicate_"+count+" input").attr("value","");//Clear value for new input
            $("#duplicate_"+count+" h4").text(addType + " #" + count);
            
            $(".remove").each(function()
            {
                $(this).attr("class","remove off");
            });
            if(count>1)
                $(".remove").eq(count-1).attr("class","remove");
            
            theClone.slideDown("slow");
            return true;
    });    

    //Remove section    
    $(".remove").live("click",function() {
        if(count>1)//Keep one
            count--;//Decrement counter
        else
            return false;//Can't remove last block
        
        if(count<5)//No more than 5
        {
            $("#add_more").css("background-color","#b8d432");
            $("#add_more").css("color","#333333");
            $("#add_more").text("Add Another " + addType);
        }
        $(this).parent().slideUp("slow",function(){
             $(this).remove();
        });//Remove data from dom.

        //Reset the remove button
        $(".remove").each(function()
        {
            $(this).attr("class","remove off");
        });
        
        if(count>1)
            $(".remove").eq(count-1).attr("class","remove");

        return false;
    });            
    
})

Incidentally I never had to extend any libraries as you did and CI picks up the additional info here just fine. However I am just using a single form validation error at the top of the screen for a maximum of five fields.