Codeigniter Form Submit using Ajax Request Example

By Hardik Savani November 5, 2023 Category : Codeigniter

In this tutorial, i will show you how submit form using jquery ajax without page refresh in codeigniter 3. i will write simple example of submit form using jquery ajax in codeigniter 3 website.

When you click on submit button then it will automatically call submit event of jquery. In submit event i write code of ajax with post request and pass all input text value as parameter. you can also use same code on modal form submit because it will not refresh page directly.

So, in this tutorial we will create new table "items" and then we simple list out that column in view file. then will write ajax request code and it will fire ajax post request from view file and save data in database.

So just follow bellow step and get simple example:

Step 1: Make Table

In first table we must have one table with some dummy records. For this example i created "items" table, so run bellow query:

CREATE TABLE IF NOT EXISTS `items` (
  `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

In this step we need to add one route for ajax search data and another for view. so open routes.php file and add code like as bellow:

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';

Read Also: Codeigniter 3 - Basic CRUD application with MySQL Example with Demo

Step 3: Create Controller

In Last step we have to create ItemController Controller, in this file we will write search database logic.

So, create new ItemController.php file in controllers folder and put bellow code:

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("items")->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('items', $data);

      echo 'Added successfully.';  
   }
}

Step 4: Make View File

In second step, we have to create view file, If you installed fresh codeigniter then we need to create itemlist.php on views folder and put bellow code on that file.

application/views/itemlist.php

Read Also: Codeigniter Stripe Payment Gateway Integration Example
<!DOCTYPE html>
<html>
<head>
    <title>codeigniter ajax request - itsolutionstuff.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 - itsolutionstuff.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>

Now we are ready to check, so you can check your own.

I hope it can help you....

Tags :
Previous

How to Find Nearest Location using Latitude and Longitude in Laravel?
Next

AngularJS Remove Duplicates Object from Array Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares