Codeigniter Tutorials

Home » Codeigniter »

Form Submission Using jQuery

File name : submit_ctrl.php

<?php
class submit_ctrl extends CI_Controller {
function __construct() {
parent::__construct();

}
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(
'employee_name' => $this->input->post('dname'),
'employee_email' => $this->input->post('demail'),
'employee_contact' => $this->input->post('dmobile'),
'employee_address' => $this->input->post('daddress')
);
$this->Auth_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.
}
}
}
?>

submit_view.php

<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>
<script type="text/javascript">

$(document).ready(function(){
$("#submit").click(function(){
$("#form").submit(); // jQuey's submit function applied on form.
});
});

</script>

<style type="text/css">

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

</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>

Auth_model.php

function form_insert($data){
$this->db->insert('employee', $data);
}

Itechtuto

Codeigniter Tutorials

Form Submission Using jQuery

File name : submit_ctrl.php

submit_view.php

Auth_model.php

Connect Us Socially:

Quick Links