Codeigniter – add/remove multiple input fields dynamically with jquery

In this post we will learn how to add and remove multiple input fileds dynamically with jquery and submit to codeigniter controller.

In this example we will create form with three input fields name,email and mobile number and add these three fileds with the help of add more functionality . After addition of input fields we can remove already added elements with remove button.

Step 1 : Download Codeigniter 3

Download fresh codeigniter from here Download Codeigniter 3

Step 2 :Create Controller

In this step, we have to create “Add_Remove” controller with index() and store() method . so put bellow code in this file:

application/controllers/Add_Remove Controller.php 

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
  class Add_Remove extends CI_Controller {
    public function __construct() {
       parent::__construct();
     }    
    public function index(){
        $this->load->view('add_remove');
    }   
    public function store(){
        if(!empty($this->input->post('submit'))){
            echo "<pre>";
            print_r($_POST);               
        }          
    }       
}

In this step we will create add_remove.php view file . In this file we will write design of html form with add more input fields code. So let’s update following file:

application/views/add_remove.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Codeigniter - Dynamically Add or Remove input fields using JQuery</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h4>Codeigniter - Dynamically Add or Remove input fields using JQuery</h4><br>
  <form class="form-horizontal" action="<?php site_url()?>/index.php/Add_Remove/store" method="post">
    <div id="dynamic_field">
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name[]" autocomplete="off">
      </div>
    </div>
    
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-5">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email[]" autocomplete="off">
      </div>
    </div>
    
    <div class="form-group">
      <label class="control-label col-sm-2" for="mobno">Mobile Number:</label>
      <div class="col-sm-5">          
        <input type="number" class="form-control" id="mobno" placeholder="Enter Mobile Number" name="mobno[]" autocomplete="off">
      </div>
    </div>
    </div>  
    
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
      </div>
    </div>
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" /> 
  </form>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){      
      var i=1;  
   
      $('#add').click(function(){  
           i++;             
		   $('#dynamic_field').append('<div id="row'+i+'"><div class="form-group"><label class="control-label col-sm-2" for="name">Name:</label><div class="col-sm-5"><input type="text" class="form-control"  placeholder="Enter Name" name="name[]" autocomplete="off"></div></div><div class="form-group"><label class="control-label col-sm-2" for="email">Email:</label><div class="col-sm-5"><input type="email" class="form-control" id="email" placeholder="Enter email" name="email[]" autocomplete="off"></div></div><div class="form-group"><label class="control-label col-sm-2" for="mobno">Mobile Number:</label><div class="col-sm-5"><input type="number" class="form-control" id="mobno" placeholder="Enter Mobile Number" name="mobno[]" autocomplete="off"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></div></div></div>');
     });
	 
     $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id"); 
           var res = confirm('Are You Sure You Want To Delete This?');
           if(res==true){
           $('#row'+button_id+'').remove();  
           $('#'+button_id+'').remove();  
           }
      });  
  
    });  
</script>
</html>
↑
Exit mobile version