Codeigniter: insert multidimensional array data in database

Suppose you have an array like this:

Array
(
    [product_name] => Door Type 1
    [product_price] => 599
    [de_color_id] => 2
    [designname] => Array
        (
            [1] => Design 1
            [2] => Design 2
        )

    [colorname] => Array
        (
            [1] => Array
                (
                    [0] => color 11
                    [1] => color 12
                )

            [2] => Array
                (
                    [0] => color21
                    [1] => color22
                    [2] => color23
                )

        )

    [colorprice] => Array
        (
            [1] => Array
                (
                    [0] => 10
                    [1] => 15
                )

            [2] => Array
                (
                    [0] => 20
                    [1] => 25
                    [2] => 30
                )

        )

)

If you need to insert above data into 3 different tables named product_door_type, product_door_design , product_door_color :

in your controller:

public function add_finish_good() {
    
    if ($this->input->server('REQUEST_METHOD') === 'POST') {
        
        date_default_timezone_set("Asia/Kolkata");
        /*Image Uploding start*/
        $file_name = $this->session->userdata('id').'_'.date('Ymdhis');
        if(!empty($_FILES['userfile']['name'])) {
            
            $file_ext   = $this->upload_image($file_name);
            $product_image      = 'uploads/products/'.$file_name.$file_ext;
            $product_image_thumb = 'uploads/products/'.$file_name.'_thumb'.$file_ext; 
        }
        else {
            $product_image = '';
            $product_image_thumb = '';  
        }
        /*Image Uploding End*/
        echo "<pre>"; print_r($_POST);exit;
        $product_type_data = array(
            'door_image' => $product_image,
            'door_image_thumb' => $product_image_thumb,
            'door_name' => $this->input->post('product_name'),
            'base_price' => $this->input->post('product_price')
        );
        $insert_door_type = $this->products_model->insert_door_type($product_type_data);
        
        // for insert design
        foreach ($this->input->post('designname') as $key => $designname) {
            $door_design_data = array(
                'door_type_id' => $insert_door_type,
                'design_name' => $designname
            );
            $insert_door_design = $this->products_model->insert_door_design($door_design_data);
            
            // for insert color and price
            foreach ($this->input->post('colorname')[$key] as $key_color => $colorname) {
                
               $colorprice = $this->input->post('colorprice')[$key][$key_color];
               
                $door_color_data = array(
                    'door_design_id' =>  $insert_door_design,
                    'color_name'      => $colorname,
                    'color_price' => $colorprice
                );
                $insert_door_color = $this->products_model->insert_door_color($door_color_data);
            }
        }
        
        if($insert_door_type && !$insert_door_design){
             redirect('admin/products/finishgoods');
        }
        if($insert_door_type && $insert_door_design){
            redirect('admin/products/finishgoods');
            //redirect('admin/products/add_finish_good_color?door_id='.$insert_door_type);
        }
    
    }
    $data['page'] = 'products';
    $id_user = $this->session->userdata('id');
    $data['user'] = $this->sales_model->get_users_sales($id_user);
    $this->load->view('admin/products/addfinishGood',$data);
}

Jquery: Add dynamic fields and validate using jquery validation plugin

Html form where you will add dynamic fields:

<script type="text/javascript" src="<?php echo HTTP_FORM_VALIDATION_PATH; ?>js/jquery.validate.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<!-- Custom script for phone number validation start -->
<script type="text/javascript">
    jQuery.validator.addMethod("phoneno", function(phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length < 11 && phone_number.length > 9 && 
        phone_number.match(/^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/);
      },"Please specify a valid phone number");

    jQuery.validator.addMethod("money", function(value, element) {
      var isValidMoney = /^\d{0,7}(\.\d{0,2})?$/.test(value);
      return this.optional(element) || isValidMoney;
    },"Please enter a valid price (eg. 100.00)");
</script>
<!-- Custom script for phone number validation Ends -->
<!-- Form Validation End -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/adddynamicelementscript.js'); ?>"></script>

 <?php $attributes = array('class' => 'form-horizontal', 'id' => 'finishgood_form'); ?>
 <?php echo form_open_multipart('admin/products/add_finish_good', $attributes);?>

<div class="row panel">
    <div class="col-sm-2 label-left">
    </div>
    <div class="col-sm-4" >
        <button class="btn btn-primary" type="button" id="adddesign">Add Design</button>
        <button class="btn btn-primary" type="button" id="reset">Reset</button>
    </div>
</div>
<div id="InputsWrapper">
    
</div>
<div class="row panel">
    <div class="col-sm-2 label-left"></div>
    <div class="col-sm-4">
        <div class="text-right">
            <button class="btn btn-primary" type="reset">Reset</button>
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</div>
<?php echo form_close(); ?>

script for adding dynamic fields adddynamicelementscript.js:

$(document).ready(function(){
            
        var InputsWrapper = $("#InputsWrapper"); 
        var designfieldcount = 0;
        var colorfieldCount = 0;
        var designnamefield = $("#adddesign");
        
        
        $(InputsWrapper).sortable();
            
        $(designnamefield).click(function() {
            designfieldcount++;
            $(InputsWrapper).append(
                '<div class="row panel">'+
                '<div class="col-sm-2 label-left"></div>'+
                '<div class="col-sm-4" id= "design'+designfieldcount+'">'+
                '<input type="hidden" id="de_color_id'+designfieldcount+'" class="de_color_id" name="de_color_id" value="'+designfieldcount+'">'+
                '<div class="input-group design_'+designfieldcount+'">'+
                '<input class="form-control designname" type="text" name="designname['+designfieldcount+']" id="design_' + designfieldcount + '" placeholder="Design ' + designfieldcount + '"/>'+
                '<span class="input-group-btn" style="vertical-align: top">'+
                '<button class="removedesign btn btn-danger">x</button>'+
                '<button class="addcolor btn btn-primary">Add Color</button>'+
                '</span>'+
                '</div>'+
                '</div>'+
                '</div>'
                );
            $(".designname").each(function(){
                $(this).rules("add", {
                    required:true,
                    messages: {
                    required: "Design Name is required"
                  }
                });                   
            });
            return false;
        });
            
        $("body").on("click", ".removedesign", function() {
            $(this).parent('span').parent('div').parent('div').parent('div').remove(); 
            return false;
        });
            
        $("body").on("click", ".addcolor", function() {
            colorfieldCount++;
            var de_id=$(this).parent('span').parent('div').parent('div').find("input[id*='de_color_id']");
            var design_id = de_id.val();

            $(this).parent('span').parent('div').parent('div').append(
                '<div class="col-sm-12 input-group color_'+colorfieldCount+'" id="color">'+
                '<div class="col-sm-6">'+
                '<input class="form-control colorname required" type="text" name="colorname['+design_id+'][]" id="design'+designfieldcount+'_color' + colorfieldCount + '" placeholder="Color"/>'+
                '</div>'+
                '<div class="col-sm-6">'+
                '<input class="form-control colorprice required" type="text" name="colorprice['+design_id+'][]" id="design'+designfieldcount+'_price' + colorfieldCount + '" placeholder="Price"/>'+
                '</div>'+
                '<span class="input-group-btn" style="vertical-align: top">'+
                '<button class="removecolor btn btn-danger">x</button>'+
                '</span>'+
                '</div>'
            );
            $(".colorname").each(function(){
                $(this).rules("add", {
                    required:true,
                    messages: {
                    required: "Color Name is required"
                  }
                });                   
            });
            $(".colorprice").each(function(){
                $(this).rules("add", {
                    required:true,
                    money : true,
                    messages: {
                    required: "Color Price is required"
                    }
                });                   
            });
            return false;
        });
            
        $("body").on("click", ".removecolor", function() {
            $(this).parent('span').parent('div').remove(); 
            return false;
        });
            
        $("#reset").on("click", function() {
            $("#InputsWrapper").empty();
                designfieldcount=0;
                colorfieldCount=0;
        });
    });

Modify your jquery.validate.js as follow :

// checkForm: function() {
//  this.prepareForm();
//  for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
//      this.check( elements[i] );
//  }
//  return this.valid();
// },

checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
            this.check( this.findByName( elements[i].name )[cnt] );
            }
        } 
        else {
            this.check( elements[i] );
        }
    }
    return this.valid();
},