HDTuto.com

Dynamically Add Input Fields and Submit to Database with Jquery and Codeigniter



In this artical, i will let you know how to create dynamically add/remove input fields and submit to database in codeigniter 3 app. we can create add more input fields functionality using jquery codeigniter.

We will create very simple example of add more functionality in codeigniter 3 project. we can easily multiple records insert to database at a time in your php codeigniter project.

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 Codeigniter

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 tagslist 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: Create 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: Add New 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: Add 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 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>

Now you can check it.

I hope it can help you...




July 21, 2019 | Category : PHPJQueryCodeigniter
Related Posts



Blog Search