Codeigniter – add/remove multiple input fields dynamically with jquery
In this post we will give you information about Codeigniter – add/remove multiple input fields dynamically with jquery. Hear we will give you detail about Codeigniter – add/remove multiple input fields dynamically with jqueryAnd how to use it also give you demo for it if it is necessary.
In this example, i will help you learn dynamically add multiple input fields and submit to database with jquery and codeigniter 3. we can add remove input fields dynamically with jquery and submit to database in codeigniter.
In this example, we will create one table “tagslist” and create one form for add multiple records in single form. we will write add more input fields js code in view file. Then we will store data in database.
Step 1: Download Fresh Codeigniter 3
In First step we will download fresh version of Codeigniter 3, so if you haven’t download yet then download from here : Download Codeigniter 3.
Step 2: Create Table
In first table we must have one table with some dummy records. For this example i created “tagslist” table, so run bellow query:
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
In this step you have to add some route in your route file. So first we will create route for add more input fields example.so put the bellow content in route file:
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'] = "AddMoreController";
$route['add-more-post']['post'] = "AddMoreController/storePost";
Step 4: Create Controller
In this step, we have to create “AddMoreController” controller with index() and storePost(). so put bellow code in this file:
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
In this step we will create addMore.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/addMore.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Codeigniter - Dynamically Add or Remove input fields using JQuery</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 >
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery</h2>
<div >
<form name="add_name" method="POST" action="/add-more-post">
<div >
<table id="dynamic_field">
<tr>
<td><input type="text" name="addmore[][name]" placeholder="Enter your Name" required="" /></td>
<td><button type="button" name="add" id="add" >Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" 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+'" ><td><input type="text" name="addmore[][name]" placeholder="Enter your Name" required /></td><td><button type="button" name="remove" id="'+i+'" >X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
</body>
</html>
Now you can check it.
I hope it can help you…
Download Source Code form here: Download From Github
Hope this code and post will helped you for implement Codeigniter – add/remove multiple input fields dynamically with jquery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs