How to insert form data into database using ajax in codeigniter (Hindi). How to submit a form using ajax without page refresh in codeigniter, codeigniter ajax crud using datatables – insert / add data. आज के इस tutorial में हम आपको बतायेंगे की Ajax का इस्तेमाल करके Codeigniter framework के द्वारा form data को database में कैसे insert करते हैं? इससे पहले के tutorial में हमने जाना था की Datatable को Codeigniter framework में कैसे load करते हैं जिसका video tutorial link यहाँ है| Click here for previous video tutorial
How to insert form data into database using Ajax in Codeigniter (Hindi Tutorial)
इस tutorial को सिखाने के लिए हमने एक Modal का इस्तेमाल किया है जिसमें तीन input field हैं| Name, Message और Age और एक Save button दिया गया है| आप data fill करने के बाद जैसे ही Save button पर click करेंगे तो data ajax के द्वारा database में insert हो जायेगा और data insert होने के बाद एक message show होता है| Data inserted Successfully.
Video tutorial
Ajax का इस्तेमाल हम तब करते हैं जब हमें database से बिना page refresh किये interact करना होता है जैसे की Database में data को insert करना, data को fetch करना, data को delete करना इत्यादि| Ajax JavaScript का एक लाइब्रेरी है जो की बिना page refresh किये data को सर्वर side तक पहुँचाने का काम करता है और Server side से data को लाने का भी काम करता है|
Source Code of this tutorial
इस source code को इस्तेमाल करने से पहले मैं आपको ये बता दूँ की मैंने एक Database create किया है जिसका नाम है ajax_test और उसके अन्दर एक table create किया है जिसका नाम है person जिसके अन्दर तीन field हैं|
CREATE TABLE `person` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`message` varchar(255) NOT NULL,
`age` int(11) NOT NULL
)इसके बाद हमने application/config/database.php के अन्दर database का नाम set किया है जो की आप video tutorial में देख सकते हैं|
View page code (index.php)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br><br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">
Add Record
</button><br><br>
<form id="createForm">
<!-- Modal -->
<div class="modal fade" id="createModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Record</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name here" name="name">
</div>
<div class="form-group">
<label>Message</label>
<input type="text" class="form-control" placeholder="Message Here" name="message">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" placeholder="Age Here" name="age">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<table id="example1" class="display table">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Message</th>
<th>Age</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example1').DataTable();
});
</script>
<script type="text/javascript">
$("#createForm").submit(function(event) {
event.preventDefault();
$.ajax({
url: "<?php echo base_url('my_controller/create'); ?>",
data: $("#createForm").serialize(),
type: "post",
async: false,
dataType: 'json',
success: function(response){
$('#createModal').modal('hide');
$('#createForm')[0].reset();
alert('Successfully inserted');
$('#exampleTable').DataTable().ajax.reload();
},
error: function()
{
alert("error");
}
});
});
</script>
</body>
</html>Controller (MY_Controller.php)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MY_Controller extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->view('index');
}
public function create()
{
$name = $this->input->post('name');
$message = $this->input->post('message');
$age = $this->input->post('age');
$data = array(
'name' => $name,
'message' => $message,
'age' => $age,
);
$this->load->model('ajax_model');
$insert = $this->ajax_model->createData($data);
echo json_encode($insert);
}
}Model (Ajax_model.php)
<?php
class Ajax_model extends CI_Model
{
public function createData($data)
{
$query = $this->db->insert('person',$data);
return $query;
}
}ये भी पढ़ें:
Sir, when i submit the form the data is gone in url and not inserted in database… http:/ /localhost /ajax/My_Controller?name=swift+desire&message=khkjhkj&age=10
Please check form method is post or not
$.ajax({
url: “”,
data: $(“#createForm”).serialize(),
type: “post”,
async: false,
change type: “post” to method: “post”
Great knowledge