CodeIgniter Send Value Using Ajax JQuery

Now I want share about send data post using jquery to function on controller codeigniter. And this is a continuation of the previous article here https://imron02.wordpress.com/2013/09/03/jquery-get-value-from-checkbox/
From the previous post, example we get code like this:

<html>
<head>
    <title>Test Checkbox</title>
    <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="all" id="checkall" />Check All
        <input type="checkbox" name="test" value="2010" />2010
        <input type="checkbox" name="test" value="2011" />2011
        <input type="checkbox" name="test" value="2012" />2012
        <button name="check">Check</button>
    </form>
 
<script type="text/javascript">
    $(function (){
        $('input[name=all]').on('click', function () {
            $(this).closest('form').find(':checkbox').prop('checked', this.checked);
        });
 
         
        $('button[name=check]').click(function() {
            var allcheck = [];
 
            $("input[name=test]:checked").each(function() {
                allcheck.push($(this).val());
            });
            alert(allcheck);
        })
    });
</script>
</body>
</html>

And now, open your codeigniter and create controller file, example I create with name c_ajax.php. Then fill it looks something like this:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class C_ajax extends CI_Controller {
    public function index() {
        //load helper for view, because we using echo site_url
        $this->load->helper('url');
        $this->load->view('v_ajax');
    }
}

/* End of file c_add.php */
/* Location: ./application/controllers/c_add.php */

And then, create view with name v_ajax.php. We fill it using code from previous post:

<html>
<head>
    <title>Test Checkbox</title>
    <script type="text/javascript" src="<?php echo base_url("assets/js/jquery-2.0.3.min.js") ?>"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="all" id="checkall" />Check All
        <input type="checkbox" name="test" value="2010" />2010
        <input type="checkbox" name="test" value="2011" />2011
        <input type="checkbox" name="test" value="2012" />2012
        <button name="check">Check</button>
    </form>
 
<script type="text/javascript">
    $(function (){
        $('input[name=all]').on('click', function () {
            $(this).closest('form').find(':checkbox').prop('checked', this.checked);
        });
 
         
        $('button[name=check]').click(function() {
            var allcheck = [];
 
            $("input[name=test]:checked").each(function() {
                allcheck.push($(this).val());
            });
            alert(allcheck);
        })
    });
</script>
</body>
</html>

And don’t forget to create folder assets, to save jquery.js on your codeigniter..

Then, change line 28 from v_ajax and add some code like this:

<script type="text/javascript">
    $(function (){
        $('input[name=all]').on('click', function () {
            $(this).closest('form').find(':checkbox').prop('checked', this.checked);
        });
 
         
        var allcheck = [];
        $('button[name=check]').click(function(e) {
 
            $("input[name=test]:checked").each(function() {
                allcheck.push($(this).val());
            });

	        $.ajax({
				type: "POST",
				url: "<?php echo site_url('c_ajax') ?>",
				data: { data: allcheck }
			}).done(function(data) {
				alert( "Data Send:");
			}).fail(function() {
				alert( "Data Not Send" );
			});
			e.preventDefault();
        })

    });
</script>

Description:

  1. Line 29-30. In there, we use jquery ajax function and use POST type
  2. Line 31. We send the data to controllers c_ajax and to function index()
  3. Line 32. We send data to controller with the array data type
  4. Line 33-35. We using function done if data succesfully send
  5. Line36-28. We using function faile if data not succes send
  6. And for e.preventDefault(), this is using
    to prevent changes to the url.
    Example if I not use e.preventDefault, so I can get url like this:

    And if I use e.preventDefault(), I got like this:

And now to find out the data we send is successful or not, w must change controllers/c_ajax.php to be like this:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class C_ajax extends CI_Controller {
    public function index() {
        $this->load->helper('url');
        if($_POST) {
            print_r($_POST);
            die();
        }
        $this->load->view('v_ajax');
    }
}

/* End of file c_add.php */
/* Location: ./application/controllers/c_add.php */

And don’t forget to add console.log on jquery query too (v_ajax.php).

<script type="text/javascript">
    $(function (){
        $('input[name=all]').on('click', function () {
            $(this).closest('form').find(':checkbox').prop('checked', this.checked);
        });
 
         
        var allcheck = [];
        $('button[name=check]').click(function(e) {
 
            $("input[name=test]:checked").each(function() {
                allcheck.push($(this).val());
            });

	        $.ajax({
				type: "POST",
				url: "<?php echo site_url('c_ajax') ?>",
				data: { data: allcheck }
			}).done(function(data) {
				console.log(data);
				alert( "Data Send:");
			}).fail(function() {
				alert( "Data Not Send" );
			});
			e.preventDefault();
        })

    });
</script>

For the last, open your browser and enable developer mode. Example if u’re using chrome, you can open your codeigniter and press ctrl + shift + j or open chrome option and select chrome menu → tools → javascript console:

And if you use firefox, klik menu tools → Web Developer → Web Console or press ctrl + shift + k:

And now run your code on browser and klik ceklist all and klik button check, and from web console we can get like this:

Or if use firefox:

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s