I try to submit form by jQuery ajax() in Codeigniter ... but nothing happen ...:(

10,180

Solution 1

Try this -> In your test.php file, give the action attribute as

action="<?php echo site_url();?>/static_data/test_add"

Then, in your practice.js file:

$('#test_form').submit(function() {
var tdata= $("#test_form").serializeArray();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = tdata;

Now, for testing, in your success function in practice.js, just write the following:

success: function(response) {
         console.log(response);
}

Here, the response you get is what your controller returns to you, now to test that, just type echo "hello"; or anything, just echo out something. (This is because you said teach me :) )

Now to see if this is working, open deveoper tools (if you are in google chrome), go to the console tab and then from bottom, select log, if everything is fine, it will return your echoed message written in your controller.

Also, to see if the form is submitted correctly, select the network tab, when you hit the submit button, the network tab will show you if the data has been submitted correctly or not.

Try this, if doesn't work, leave a comment.

Solution 2

I think you can easily solve this problem by this simple ajax request given below:

$(document).ready(function(){

    $("#test_form").on("submit", function(event){
         event.preventDefault();
         $.ajax({
              url : base_url+"static_data/test_add",
              type : "post",
              data : $("#test_form").serialize(),
              dataType : "json",
              success(data)
              {
                  alert('SUCCESS!!');
              } 
         });
    });

});

Before doing that, in your view file (test.php) on the head setion please write this

<script>
    var base_url = "<?php echo base_url(); ?>";
</script>
Share:
10,180
petercilee
Author by

petercilee

A very normal web developer , used use Linux C and Python , join web area recently

Updated on June 21, 2022

Comments

  • petercilee
    petercilee over 1 year

    sorry for this repeated & repeated question , but I really don't know how to solve.

    there was one button and two text_input , when I click this button,if it's work,I will see a alert and show "success" to me , but unfortunately , I just can see nothing.

    nothing !!

    I don't know why :(

    please help me , please ...... I read many tutorials in stackoverflow or other website about codeigniter , but I don't find anything can solve my problem , please teach me guys.

    here is a very simple form below

    file name: test.php

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>test </title>
        <link rel="stylesheet" href="<?=base_url("/css/bootstrap.css")?>">
        <link rel="stylesheet" href="<?=base_url("/css/basic.css")?>">
        <script src="<?=base_url("/js/jquery-1.10.2.min.js")?>"></script>
        <script src="<?=base_url("/js/bootstrap.js")?>"></script>
        <script src="<?=base_url("/js/practice.js")?>"></script>
    </head>
    <body>
    
    <div style="margin:19px">
        <form id="test_form" method="post">
        USER:<input id="num" name="num" type="text" ><br> 
        NAME:<input id="name" name="name" type="text" ><br>
        <input id="submit" name="submit" class="btn" type="submit" value="save"> 
        </form>
    </div>
    </body>
    </html>
    

    I want to submit data in this form by jQuery Ajax() , the JS file is below

    file name: practice.js

    $(document).ready(function(){
        $("#test_form").submit(function(e){     
            e.preventDefault();
    
            var tdata= $("#test_form").serializeArray();
    
            $.ajax({
                type: "POST",
                url: "http://localhost/index.php/static_data/test_add",
                dataType: json, 
                data: tdata, 
    
                success:function(tdata)
                {
                    alert('SUCCESS!!');
                }
            });
        });
    });
    

    and below was my controller

    file name:static_data

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    
    class Static_data extends CI_Controller {
    
      public function test()
      {
        $this->load->view('test');      
      }
    
      public function test_add()
      {
        $this->load->model("paper");
        $this->paper->test_add();
      }
    }
    

    and this file below was my model set

    file name:paper.php

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');  
    class Paper extends CI_Model {  
    
      function __construct()  
      {  
        parent::__construct();  
      }  
    
      function test_add()
      {  
        $this->load->helper('form');
        $this->load->helper('html');
        $this->load->database();
        $tdata = array(
          'num' =>  $this->input->post('num'),
          'name' =>  $this->input->post('name'),
        );
        $this->db->insert('test_table',$tdata);  
      }      
    }  
    
    • Niet the Dark Absol
      Niet the Dark Absol almost 10 years
      Try removing the http://localhost part of the URL, leaving just /index.php/static_data/test_add. Also consider adding an "error" handler.
    • geevee
      geevee almost 10 years
      do you see the actual request being sent? (you can check in chrome's developer console - "network" pane). want to understand if it's being stopped on the client level or the server.
  • petercilee
    petercilee almost 10 years
    thank you very much !!! although it's work brevity....I use the method you post , and the ajax can work , really thank you , thank you !!! however....something trouble arise at database , the code I use was utf-8 , type was "char" , but no matter I submit "aaaaa" or "12345" , they all become "0" in database :( what's going on ? how I need to do else ?