Codeigniter Tutorials

Home » Codeigniter »

Add remove text field dynamically using jquery with ajax in codeigniter.

How to Add dynamically Add more fields?

View

<input type="hidden" id="trow_counter" value="1"/>
<div class="" id="mgmt_details" style="">

<div class="row border border-light mb-2" >
<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput"><b>Organisation Name </b><span class="required" aria-required="true"> * </span></label>
<input type="text" class="form-control" id="organisation_name" name="organisation_name[]" value="<?php echo set_value('organisation_name[]'); ?>" placeholder="Company/Organisation Name" maxlength="255" required />
<span class="required" id="organisation_name_error" aria-required="true"></span>
<span class="error"><?php echo form_error('organisation_name[]'); ?></span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">

<label for="formGroupExampleInput"><b>Experience (Years) </b><span class="required" aria-required="true"> * </span></label>
<select name="work_experience_year[]" id="work_experience_year" class="form-control" required >
<option value=""> --- Select Year ---</option>

<option value="0">0 Year</option>
<option value="1">1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5">5 Years</option>
<option value="6">6 Years</option>
<option value="7">7 Years</option>
<option value="8">8 Years</option>
<option value="9">9 Years</option>
<option value="10">10 Years</option>

</select>
<span class="required" id="work_experience_year_error" aria-required="true"></span>
<span class="error"><?php echo form_error('work_experience_year[]'); ?></span>

</div>
</div>
<div class="col-md-2">
<div class="form-group">

<label for="formGroupExampleInput"><b>Experience (Months) </b><span class="required" aria-required="true"> * </span></label>
<select name="work_experience_month[]" id="work_experience_month" class="form-control" required >
<option value=""> --- Select Months ---</option>

<option value="0">0 Month</option>
<option value="1">1 Month</option>
<option value="2">2 Months</option>
<option value="3">3 Months</option>
<option value="4">4 Months</option>
<option value="5">5 Months</option>
<option value="6">6 Months</option>
<option value="7">7 Months</option>
<option value="8">8 Months</option>
<option value="9">9 Months</option>
<option value="10">10 Months</option>
<option value="11">11 Months</option>

</select>
<span class="required" id="work_experience_month_error" aria-required="true"></span>
<span class="error"><?php echo form_error('work_experience_month[]'); ?></span>

</div>
</div>

<div class="col-md-3">
<div class="form-group">
<label for="formGroupExampleInput2"><b>Experience Letter</b><span class="required" aria-required="true"> * </span></label>
<input type="file" id="experience_letter" name="experience_letter[]" class="" onchange="Validatefile_onlypdf(this.id,this.value)" >
<p style="color:green;">File format (pdf)/ Max size:1MB</p>
<span class="required" id="experience_letter_error" aria-required="true"></span>
<span class="help-block" style="color:red;"><?php echo form_error('experience_letter[]'); ?></span>

</div>
</div>

<div class="col-md-2">
<div class="form-group">
<label for="formGroupExampleInput2" class=""><b>Add/Remove</b> </label>
<div class="float-right"> <a href="javascript:add_work_experience()" class="btn btn-primary"> <i class="fa fa-plus"></i> Add</a>
</div>
</div>
</div>

</div> 

<hr>
</div>

Js Function :-

Controller Class

$this->form_validation->set_rules('organisation_name[]', 'Company/Organisation Name', 'trim|required');
$this->form_validation->set_rules('work_experience_year[]', 'Year', 'trim|required');
$this->form_validation->set_rules('work_experience_month[]', 'month', 'trim|required');

$organisation_name = $this->input->post('organisation_name');
$work_experience_year = $this->input->post('work_experience_year');
$work_experience_month = $this->input->post('work_experience_month');
$conunt_org = count($organisation_name);
$conunt_year = count($work_experience_year);
$conunt_month = count($work_experience_month);
$count_exp_letter = count(array_filter($_FILES['experience_letter']['name']));
if($conunt_org != $count_exp_letter)
{
//$this->form_validation->set_rules("experience_letter", "Experience letter", "callback_file_check_experience_letter");

$this->form_validation->set_rules('experience_letter[]', 'Experience Letter', 'required');

}

/*
$organisation_name = $this->input->post('organisation_name');
$work_experience_year = $this->input->post('work_experience_year');
$work_experience_month = $this->input->post('work_experience_month');
foreach($organisation_name as $key=>$val)
{
$this->form_validation->set_rules("organisation_name[]", "Organization", "trim|required");
$this->form_validation->set_rules("work_experience_year[]", "year", "trim|required");
$this->form_validation->set_rules("work_experience_month[]", "month", "trim|required");

if(empty($_FILES['experience_letter']['name']))
{
$this->form_validation->set_rules('experience_letter[]', 'Experience Letter', 'required');
}

}
*/

if(!empty($organisation_name) && !empty($work_experience_year) && !empty($work_experience_month))
{

if(!empty($_FILES['experience_letter']['name']) && count(array_filter($_FILES['experience_letter']['name']))>0)
{

$upload_path_dir = '/media/bissales/bissalespdf/hrdportal/yp/experience_letter/';
if (!is_dir($upload_path_dir)) {
$oldmask = umask(0);
mkdir($upload_path_dir,0777,TRUE);
umask($oldmask);
}

//$this->load->helper('common');
$docs = multiple_file_uploading($upload_path_dir,array_filter($_FILES['experience_letter']),$_SESSION['UserID']);

if ($docs === FALSE){
$error = array('errors' => $this->upload->display_errors());
} else {
$experience_letter_name = $docs;
}
}

for($k = 0; $k < count($organisation_name); $k++)
{
$work_exp_array[] = array(
'fki_applicant_id' => $user_pk_id,
'application_type' => 'STND',
'organisation_name' => $organisation_name[$k],
'work_experience_year' => $work_experience_year[$k],
'work_experience_month' => $work_experience_month[$k],
// 'work_experience' => $experience_year_total[$k],
'experience_letter' => $experience_letter_name[$k],
'created_on' => date('Y-m-d H:i:s'),
'created_by' => $_SESSION['UserID'],
);
}

// echo "<pre>"; print_r($work_exp_array); echo "</pre>"; die;

$result_data = $this->Yp_model->InsertArray($table='yp_work_experience',$work_exp_array);

}

multiple_file_uploading() Helper function

Controller

File Name : Addremove.php

<?php if (! defined('BASEPATH')) exit('No direct script access allowed');
class Addremove extends CI_Controller {
function __construct()
{
parent::__construct();
//$this->load->model('Auth_model');

}

public function index() {
$this->load->view('addremove');
}

public function addmore()
{

if(!empty($this->input->post('name'))){
foreach ($this->input->post('name') as $key => $value) {
//$sql = "INSERT INTO tagslist(name) VALUES ('".$value."')";
//$this->db->query($sql);

//$this->db->set('name',$value);
//$this->db->insert('tagslist');

$this->Auth_model->store_data($value);

}
echo json_encode(['success'=>'Names Inserted successfully.']);
}

exit;

}

}

View

File Name :

<!DOCTYPE html>
<html>
<head>
<title>PHP - 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 class="container">
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="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="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
//var postURL = "/addmore.php";
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="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();
});

$('#submit').click(function(){
$.ajax({
//url:postURL,
url:'<?php echo base_url()?>addremove/addmore',
method:"POST",
data:$('#add_name').serialize(),
type:'json',
success:function(data)
{
i=1;
$('.dynamic-added').remove();
$('#add_name')[0].reset();
alert('Record Inserted Successfully.');
}
});
});
});
</script>
</body>
</html>

model

public function store_data($value)
{
$sql = "INSERT INTO tagslist(name) VALUES ('".$value."')";
$this->db->query($sql);

//$this->db->insert('tagslist',$sql);
//return;
}

Example : add/remove multiple input fields dynamically with jquery

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 ;

<?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";

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.');
}

}

addMore.php

PHP Codeigniter - Dynamically Add or Remove input fields using JQuery

Dynamically Add or Remove input fields using JQuery

<!DOCTYPE html>
<html>
<head>
<title>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 class="container">
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery</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>

Itechtuto

Codeigniter Tutorials

Add remove text field dynamically using jquery with ajax in codeigniter.

Controller

File Name : Addremove.php

View

File Name :

model

Dynamically Add or Remove input fields using JQuery

Connect Us Socially:

Quick Links