From our previous blogs, you have learnt much more about working with CodeIgniter framework.
Now, with this tutorial you can learn how to include external jQuery file in your codeIgniter framework for form submission.
First, jQuery file must be kept in a folder at CodeIgniter’s root directory.
Second, to link External jQuery file “submit.js” placed in above folder named “js” with form:
<!------- Including jQuery library from Google------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-------Including jQuery file in form------>
<script src="<?php echo base_url(). "js/submit.js" ?>"></script>above jQuery file contains following code to submit form:
$("#form").submit();Watch our live demo or follow, our complete codes to learn more about this.
or
download the submit_ci_jquery.zip file from below link, extract files and include them in view, controller and model directory of your codeigniter framework as shown in the Read Me.txt file.
VIEW FILE: submit_view.php
copy the below code in your view.
<html>
<head>
<title>Submit CodeIgniter Form Using jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(). "css/submit.css" ?>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo base_url(). "js/submit.js" ?>"></script>
</head>
<body>
<div id="container">
<?php echo form_open('submit_ctrl',array('id'=>'form')); ?>
<h1>Submit CodeIgniter Form Using jQuery</h1>
<?php echo form_label('Name :'); ?> <?php echo form_error('dname'); ?>
<?php echo form_input(array('id' => 'dname', 'name' => 'dname')); ?>
<?php echo form_label('Email :'); ?> <?php echo form_error('demail'); ?>
<?php echo form_input(array('id' => 'demail', 'name' => 'demail')); ?>
<?php echo form_label('Mobile No. :'); ?> <?php echo form_error('dmobile'); ?>
<?php echo form_input(array('id' => 'dmobile', 'name' => 'dmobile')); ?>
<?php echo form_label('Address :'); ?> <?php echo form_error('daddress'); ?>
<?php echo form_input(array('id' => 'daddress', 'name' => 'daddress')); ?>
<?php echo ('<p id="submit">Submit</p>'); ?>
<?php echo form_close(); ?>
</div>
</body>
</html>
CONTROLLER FILE: submit_ctrl.php
copy the below code in your controller.
<?php
class submit_ctrl extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('submit_model');
}
function index(){
$this->load->library('form_validation'); // Including Validation Library.
$this->form_validation->set_error_delimiters('<div class="error">', '</div>'); // Displaying Errors in Div
$this->form_validation->set_rules('dname', 'Username', 'required|min_length[5]|max_length[15]'); // Validation for Name Field
$this->form_validation->set_rules('demail', 'Email', 'required|valid_email'); // Validation for E-mail field.
$this->form_validation->set_rules('dmobile', 'Contact No.', 'required|regex_match[/^[0-9]{10}$/]'); // Validation for Contact Field.
$this->form_validation->set_rules('daddress', 'Address', 'required|min_length[10]|max_length[50]'); // Validation for Address Field.
if ($this->form_validation->run() == FALSE) {
$this->load->view('submit_view');
}else {
// Initializing database table columns.
$data = array(
'Student_Name' => $this->input->post('dname'),
'Student_Email' => $this->input->post('demail'),
'Student_Mobile' => $this->input->post('dmobile'),
'Student_Address' => $this->input->post('daddress')
);
$this->submit_model->form_insert($data); // Calling Insert Model and its function.
echo "<script>alert('Form Submitted Successfully....!!!! ');</script>";
$this->load->view('submit_view'); // Reloading after submit.
}
}
}
?>
MODEL FILE: submit_model.php
Create new class in your model as shown below.
<?php
class submit_model extends CI_Model{
function __construct() {
parent::__construct();
}
function form_insert($data){
$this->db->insert('employee', $data);
}
}
?>
My SQL Code Segment:
To create database and table, execute following codes in your My SQL .
CREATE DATABASE company;
CREATE TABLE employee(
employee_id int(10) NOT NULL AUTO_INCREMENT,
employee_name varchar(255) NOT NULL,
employee_email varchar(255) NOT NULL,
employee_contact varchar(255) NOT NULL,
employee_address varchar(255) NOT NULL,
PRIMARY KEY (employee_id)
)
jQuery Script: submit.js
On click of submit button following jQuery code executes.
$(document).ready(function(){
$("#submit").click(function(){
$("#form").submit(); // jQuey's submit function applied on form.
});
});
CSS FILE: submit.css
Styling HTML Elements.
#container{
width:960px;
height:610px;
margin: 50px auto;
}
.error{
color: red;
font-size: 13px;
margin-bottom: -15px;
}
form{
width: 345px;
padding: 0px 50px 20px;
background-color: whitesmoke;
border: 1px solid #ccc;
box-shadow: 0 0 5px;
font-family: 'Marcellus', serif;
float:left;
margin-top: 15px;
}
h1{
text-align: center;
font-size: 28px;
}
hr{
border: 0;
border-bottom: 1.5px solid #ccc;
margin-top: -10px;
margin-bottom: 30px;
}
label{
font-size: 17px;
}
input{
width: 100%;
padding: 10px;
margin: 6px 0 20px;
border: none;
box-shadow: 0 0 5px;
}
#submit{
padding: 10px;
text-align: center;
box-shadow: 0 0 5px;
font-size: 18px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
color: #ffffff;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 1px 0px #13506D;
}
#submit:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}
Conclusion:
So, this was all about submitting codeigniter form through jQuery . keep following us to learn more.
5 Replies to “CodeIgniter Form Submission Using jQuery”
Thanks for the above code …..!
It is useful one.
what path to run this code, thanks
wrong codes.database codes differs
here is the error-free code
submit_view.php
Submit CodeIgniter Form Using jQuery
<link rel="stylesheet" type="text/css" href="”>
<script src="”>
‘form’)); ?>
Submit CodeIgniter Form Using jQuery
‘dname’, ‘name’ => ‘dname’)); ?>
‘demail’, ‘name’ => ‘demail’)); ?>
‘dmobile’, ‘name’ => ‘dmobile’)); ?>
‘daddress’, ‘name’ => ‘daddress’)); ?>
<?php echo ('Submit’); ?>
submit_ctrl.php
load->model(‘submit_model’);
}
function index()
{
//including validation library
$this->load->library(‘form_validation’);
//displaying errors in div
$this->form_validation->set_error_delimiters(”, ”);
//validation for name field
$this->form_validation->set_rules(‘dname’, ‘Username’, ‘required|min_length[5]|max_length[15]’);
//validation for email field
$this->form_validation->set_rules(‘demail’, ‘Email’, ‘required|valid_email’);
//validation for contact field
$this->form_validation->set_rules(‘dmobile’, ‘Contact No.’, ‘required|regex_match[/^[0-9]{10}$/]’);
//validation for address field
$this->form_validation->set_rules(‘daddress’, ‘Address’, ‘required|min_length[10]|max_length[50]’);
if ($this->form_validation->run() == FALSE)
{
$this->load->view(‘submit_view’);
}
else
{
//Initializing database table columns
$data = array(
’employee_name’ => $this->input->post(‘dname’),
’employee_email’ => $this->input->post(‘demail’),
’employee_mobile’ => $this->input->post(‘dmobile’),
’employee_address’ => $this->input->post(‘daddress’)
);
//Calling Insert Model and its function
$this->submit_model->form_insert($data);
echo “alert(‘Form Submitted Successfully….!!!! ‘);”;
//Reloading after submit
$this->load->view(‘submit_view’);
}
}
}
?>
submit_model.php
db->insert(’employee’, $data);
}
}
?>
database part:
CREATE DATABASE company;
CREATE TABLE employee(
employee_id int(10) NOT NULL AUTO_INCREMENT,
employee_name varchar(255) NOT NULL,
employee_email varchar(255) NOT NULL,
employee_mobile varchar(255) NOT NULL,
employee_address varchar(255) NOT NULL,
PRIMARY KEY (employee_id)
)
perfectly works.
Can you add edit update and delete code using form_validation and ajax request(without using action attribute)