how to submit a form using ajax without page refresh in codeigniter?

Today, We want to share with you how to submit a form using ajax without page refresh in codeigniter?.In this post we will show you submit a form without page refresh using jquery php, hear for submit form without page refresh using javascript we will give you demo and example for implement.In this post, we will learn about How To Submit A Form Using Ajax Without Page Refresh? with an example.

Codeigniter Ajax Form Submit Example

Step 1: Make Table

Example created “tamilrockers” table

CREATE TABLE IF NOT EXISTS `tamilrockers` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `description` varchar(255) NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=

Step 2: Create Route

application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['ajax-request'] = 'ItemController/ajaxRequest';
$route['ajax-requestPost']['post'] = 'ItemController/ajaxRequestPost';

Step 3: Create Controller

application/controllers/ItemController.php

<?php


defined('BASEPATH') OR exit('No direct script access allowed');


class ItemController 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 ajaxRequest()
   {
       $data['data'] = $this->db->get("tamilrockers")->result();
       $this->load->view('itemlist', $data);
   }


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function ajaxRequestPost()
   {
      $data = array(
            'title' => $this->input->post('title'),
            'description' => $this->input->post('description')
        );
      $this->db->insert('tamilrockers', $data);


      echo 'Added successfully.';  
   }
}

Step 4: Make View File

application/views/itemlist.php

<!DOCTYPE html>
<html>
<head>
    <title>codeigniter ajax request - www.pakainfo.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>codeigniter ajax request - www.pakainfo.com</h2>
        </div>
    </div>
</div>


<div class="row">
  <div class="col-lg-8">
    <strong>Title:</strong>
    <input type="text" name="title" class="form-control" placeholder="Title">
  </div>
  <div class="col-lg-8">
    <strong>Description:</strong>
    <textarea name="description" class="form-control" placeholder="Description"></textarea>
  </div>
  <div class="col-lg-8">
    <br/>
    <button type="submit" class="btn btn-success">Submit</button>
  </div>
</div>


<table class="table table-bordered" style="margin-top:20px">


  <thead>
      <tr>
          <th>Title</th>
          <th>Description</th>
      </tr>
  </thead>


  <tbody>
   <?php foreach ($data as $item) { ?>      
      <tr>
          <td><?php echo $item->title; ?></td>
          <td><?php echo $item->description; ?></td>
      </tr>
   <?php } ?>
  </tbody>


</table>
</div>


<script type="text/javascript">
    $('form').submit(function(e) {
        e.preventDefault();


       var title = $("input[name='title']").val();
       var description = $("textarea[name='description']").val();


        $.ajax({
           url: '/ajax-requestPost',
           type: 'POST',
           data: {title: title, description: description},
           error: function() {
              alert('Something is wrong');
           },
           success: function(data) {
                $("tbody").append("<tr><td>"+title+"</td><td>"+description+"</td></tr>");
                alert("Record added successfully");  
           }
        });


    });


</script>


</body>
</html>

I hope you get an idea about submit form without reloading page php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.