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.

submit codeigniter form using jQuery

 

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%);
}

Pabbly Form Builder


Conclusion:

So, this was all about submitting codeigniter form through jQuery . keep following us to learn more.