In this tutorial, We will learn to add multiple input fields and submit them to the database with jquery and Codeigniter 3. we can add remove input fields dynamically with jquery and submit them to the database in Codeigniter.


Follow some steps to add and remove fields using jquery and insert data in the database:



Step 1: Download Codeigniter 3

download Codeigniter 3 here is link https://codeigniter.com/download




Step 2: Create Table

We must have one table to insert some records.

CREATE TABLE IF NOT EXISTS `tagslist` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;


Step 3: Add Route

create some routes to navigate the pages 


application/config/routes.php

<?php
$route['add-more'] = "AddMoreController";
$route['add-more-post']['post'] = "AddMoreController/storePost";


Step 4: Create Controller

create controller and give name as AddMoreController.php


application/controllers/AddMoreController.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
   
class AddMoreController extends CI_Controller {
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    }
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $this->load->view('addMore');
    }
   
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function storePost()
    {
        if(!empty($this->input->post('addmore'))){
   
            foreach ($this->input->post('addmore') as $key => $value) {
                $this->db->insert('tagslist',$value);
            }
               
        }
   
        print_r('Record Added Successfully.');
    }
       
}


Step 5: Create View

create view to show our html form


application/views/addMore.php

<!DOCTYPE html>
<html>
<head>
    <title>Dynamically Add or Remove input fields using JQuery & Codeigniter</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
    <h2 align="center">My Form</h2>  
    <div class="form-group">
         <form name="add_name" method="POST" action="/add-more-post">
   
            <div class="table-responsive">  
                <table class="table table-bordered" id="dynamic_field">  
                    <tr>  
                        <td><input type="text" name="addmore[][name]" placeholder="Enter your Name" class="form-control name_list" required="" /></td>  
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                    </tr>  
                </table>  
                <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />  
            </div>
   
         </form>  
    </div> 
</div>
   
<script type="text/javascript">
    $(document).ready(function(){      
      var i=1;  
   
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="addmore[][name]" placeholder="Enter your Name" class="form-control name_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });
  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
  
    });  
</script>
</body>
</html>


Thanks, I hope it will work for you .....