Cannot get field data in controller from view when submiting form using ajax

Question

I am working on codeigniter, but when i submit the form using ajax i cannot get field data from view to Controller. From the past 2 days i am working on it but can't find the solution. When i print field value it shows blank i.e. no value. I only want to use ajax for submitting data, no normal posting. Please help to sort out my problem.

Here is my code:

View

$(document.body).on('click', '.postbtn' ,function(e){
    e.preventDefault();
    $('#posting_comment').submit();
});

<script type="text/javascript">
function sendCareerData()
{

    var fdata = new FormData(document.getElementById("posting_comment"));

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url();?>"+"dashboard/do_upload",
        data: fdata,
        mimeType:"multipart/form-data", 
        contentType: 'text',
        cache: false,
        processData:false,
        dataType: 'html', 
        success: function (data) {
          alert("d"+data);
        },
            error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log( errorThrown );  
        }

    });

    return false;
}

</script>

<form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
</form>

Controller:

public function do_upload()
    {
$comment_topic=$_POST['comment_topic'];
$attachment_file=$_POST['attachment_file'];
$config['upload_path'] ='./uploads/';
$config['allowed_types'] = 'gif|jpg|png||jpeg';
$config['max_width'] = 1000;
$config['max_height'] = 1000;
$config['max_size'] = 20000000;
$config['encrypt_name'] = FALSE;
$this->load->library('upload', $config);
$this->upload->do_upload($file_names);
    }

Both $comment_topic and $attachment_file contains blank value.

Answer 1

Here is your answer

First in your controller copy and paste this code

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

/**
 * User class.
 * 
 * @extends CI_Controller
 */
class Dashboard extends CI_Controller {

    /**
     * __construct function.
     * 
     * @access public
     * @return void
     */
    public function __construct() {

        parent::__construct();

               }

    public function index()
    {
           $this->load->library('upload');
          $this->load->helper(array('url'));
          $this->load->view('Test');
    }   
       public function do_upload()
           {
             $comment_topic=$this->input->post("comment_topic");
          $attachment_file=$_FILES["attachment_file"];
         $output_dir = "uploads/";
           $fileName = $_FILES["attachment_file"]["name"];
     move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
           }
    }

Then copy and paste this code in the view file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function sendCareerData()
{

    var data = new FormData($('#posting_comment')[0]);


     $.ajax({
               type:"POST",
               url:"<?php echo site_url('Dashboard/do_upload');?>",
               data:data,
               mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
               success:function(data)
              {
                        console.log(data);

               }
       });

}

</script>

<form name="posting_comment" id="posting_comment" >
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post" onclick = "return sendCareerData()"/>
</form>

Now run and check the result for more on ajx read this http://w3code.in/2015/10/how-to-edit-delete-and-update-data-without-refreshing-page-in-codeigniter/ and for file upload read this http://w3code.in/2015/09/upload-file-using-codeigniter/ and http://w3code.in/2015/10/how-to-upload-file-using-ajax-in-codeigniter/

Answer 2

In your "view" code, You have done few mistakes which is as follows:

1. Button click event should be inside <script> tag and ready() event

<script>
$(document).ready(function() {
    $(document.body).on('click', '.postbtn' ,function(e){
        e.preventDefault();
        $('#posting_comment').submit();
    });
});
</script>

2. In AJAX, Change contentType: 'text' to false

jQuery.ajax({
    type: "POST",
    url: "<?php echo base_url();?>"+"dashboard/do_upload",
    data: fdata,
    mimeType:"multipart/form-data", 
    contentType: false, // change 'text' to false
    cache: false,
    processData:false,
    dataType: 'html', 
    success: function (data) {
      alert("d"+data);
    },
        error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log( errorThrown );  
    }

});

3. Change in Controller:

You have used $_POST['attachment_file'] which should be $_FILES['attachment_file'], for accessing uploaded files.

4. Provide File Control Name in upload Function:

Replace this => $this->upload->do_upload($file_names);

with this => $this->upload->do_upload("attachment_file");

Create "uploads" folder in root directory.

It is working after these correction...

Complete Code:

Controller (demo.php):

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

class Demo extends CI_Controller {

function __construct()
{
    parent::__construct();
}

function uploadview()
{
    $this -> load -> view("uploadview");
}

function do_upload()
{
    $comment_topic=$_POST['comment_topic'];
    $attachment_file=$_FILES['attachment_file']['name'];
    $config['upload_path'] ='./uploads/';
    $config['allowed_types'] = 'gif|jpg|png||jpeg';
    $config['max_width'] = 1000;
    $config['max_height'] = 1000;
    $config['max_size'] = 20000000;
    $config['encrypt_name'] = FALSE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload("attachment_file")){
        echo "File $attachment_file Uploaded with Comment: $comment_topic";
    } else {
        echo "Upload Failed";
    }
}

View (uploadview.php):

<html>
<head>
    <script type="text/javascript" src="<?php echo base_url() . "application/assets/public/"; ?>js/jquery-2.0.0.min.js"></script>
<script>
    $(document).ready(function() {
        $(document.body).on('click', '.postbtn' ,function(e){
            e.preventDefault();
            $('#posting_comment').submit();
        });
    });

    function sendCareerData()
    {
        var fdata = new FormData(document.getElementById("posting_comment"));

        jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url();?>"+"demo/do_upload",
            data: fdata,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            dataType: 'html',
            success: function (data) {
                alert("result: "+data);
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                console.log( errorThrown );
            }

        });

        return false;
    }
</script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <br/>
            <form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
                <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
                <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
                <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Output:

Answer 3

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
    <script>
      $(function () {
        $('#your_form_id').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'your receiver page URL',
            data: $('#your_form_id').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>