dynamically add multiple input fields and submit to database with jquery and codeigniter

Today, We want to share with you dynamically add input fields and submit to database with jquery and codeigniter.In this post we will show you dynamically add remove input fields in php with jquery ajax, hear for dynamically add / remove input fields in codeigniter with jquery ajax we will give you demo and example for implement.In this post, we will learn about Dynamically Add Input Fields And Submit To Database With JQuery And PHP with an example.

how to add dynamic textbox (row and save to database using php)

Step 1: Download Codeigniter

https://codeigniter.com/download

Step 2: Create productslist Table

CREATE TABLE IF NOT EXISTS `productslist` (
  `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: Create Route

application/config/routes.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['add-more'] = "ExtraAddLoadController";
$route['add-more-post']['post'] = "ExtraAddLoadController/storePost";

Step 4: Add New Controller

application/controllers/ExtraAddLoadController.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class ExtraAddLoadController extends CI_Controller {


    public function __construct() {

       parent::__construct();
       $this->load->database();

    }


    public function index()
    {

        $this->load->view('addMore');
    }

    public function storePost()

    {

        if(!empty($this->input->post('addmore'))){
            foreach ($this->input->post('addmore') as $key => $value) {

                $this->db->insert('productslist',$value);

            }

        }

   

        print_r('Record Added Successfully.');

    }

       

}

Step 5: Add View

application/views/addMore.php

<!DOCTYPE html>
<html>
   <head>
      <title>PHP Codeigniter - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</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">PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</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>

I hope you get an idea about dynamically add input fields and submit to database with jquery and codeigniter.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.