How to send data with AJAX and PHP

Question

I'm trying to implement a commenting box with AJAX and PHP (CodeIgniter framework). Here is the code.

The view (HTML code):

<form id="form" method="post">
    <div class="input-group" id="input-group"><!-- input group starts-->
        <textarea class="form-control" id="Comment" name="Comment"  placeholder="Comment on Scenery..." maxlength="300" cols="70" rows="3" required></textarea>
        <input type="hidden" id="uploader_id" value="<?php echo $uploader_id ?>"/>
        <input type="hidden" id ="scenery_id" value="<?php echo $scenery_id ?>"/>
        <button type="submit" id="submit"class="btn btn-info regibutton" >Post</button>
    </div>
</form>

<hr/>

<div class="comment-block">
<?php
if ($comment==NULL){
    //if no scenery comment echo disclaimer
    echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 5px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
    echo " No scenery Comments";    
    echo "</li>
        </ul>"; 
} else {
    foreach ($comment as $row){
        // if the comments are availabe echo them
        echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 10px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
        echo $row->Comment;
        echo "<br/>";
        echo "<p style='font-size: 11px; color:#333; padding-top: 5px;'>".date(" D d M Y - H:i:s ",strtotime($row->Date_posted))."By - ". $row->Username. " </p>";
        echo $row->Date_added;
        echo "</li>
            </ul>";
    }
}
?>
</div>

The AJAX code:

<script>
$(document).ready(function(){
    $('#submit').click(function(e){
        // remove the error class
        $('.input-group').removeClass('has-error');
        //remove the previous  
        $('.help-block').remove(); 
        var Comment = $('#Comment').val();
        var scenery_id = $('#scenery_id').val();
        var uploader_id = $('#uploader_id').val();
        var datastring = 'Comment'+Comment+'&scenery_id'+scenery_id+'&uploader_id'+uploader_id;

        $.ajax({
            type:'POST',
            url: "<?php echo base_url('display_scenery/add_comment')?>",
            data: datastring,
            datatype: 'json',
            cache: 'false',
            encode: true
        });
        .done(function(data) {
            // log data to the console so we can see
            console.log(data);
            // here we will handle errors and validation messages
            if(!data.success){
                $('#data.errors.input-group'){
                    $('#iput-group').addClass('has-error');
                    $('#iput-group').append('<div class= "help">' + data.errors.Comment+'</div>');
                } else {
                    $('#form').append('<div class="alert">'+ data.message+'</div>');
                } 
            )};
            .fail(function(data) {
                // show any errors
                // best to remove for production
                console.log(data);
            });
        }*/
        // prevent default action
        e.preventDefault();
    });
});
</script>

The back end code in CodeIgniter:

public function add_comment(){
    if(!$this->session->userdata('logged_in')) {
        $data['error'] = 'Signup needed to comment on a scenery';
    } else {
        $this->load->library('form_validation'); 
        $session_data = $this->session->userdata('logged_in');
        $User_id= $session_data['User_id'];
        $scenery_id = $_POST['Scenery_id'];
        $Comment=$_POST['Comment'];
        $this->form_validation->set_rules('Comment', 'Comment', 'trim|required');
        if($this->form_validation->run() == FALSE) {
            $data['error'] = validation_errors();
        } else {
            //loads the model image_display then redirects to scenery page
            $this-> image_display->add_comment( $scenery_id,$User, $Comment); 
            $data['Comment']=$this-> image_display->get_comments($scenery_id);
            $data['success'] = TRUE;
        }
    }
    echo json_encode($data);
}

I want a system where the user can comment and the comments can be displayed. I'm trying to locate why the code is not working,kindly assist, I'm relatively new to AJAX.

Answer 1

try this :

<script>
$(document).ready(function(){
    $('#submit').click(function(e){
        // remove the error class
         $('.input-group').removeClass('has-error');
         //remove the previous  
    $('.help-block').remove(); 
        var datastring = $("#form").serialize();

        $.ajax({
            type:'POST',
            url: "<?php echo base_url('display_scenery/add_comment')?>",
            data: datastring,
            datatype: 'json',
            cache: 'false',
            encode: true
        });
        .done(function(data)
        {
              // log data to the console so we can see
            console.log(data);
            // here we will handle errors and validation messages
        if(!data.success){

            $('#data.errors.input-group'){
                $('#iput-group').addClass('has-error');
                $('#iput-group').append('<div class= "help">' + data.errors.Comment+'</div>');
            }
            else
            {
                $('#form').append('<div class="alert">'+ data.message+'</div>');
            } 
            )};
        .fail(function(data) {

        // show any errors
        // best to remove for production
        console.log(data);
    });

        }*/
            // prevent default action
    e.preventDefault();
    });

});


</script>