CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Sahan Perera
Sahan Perera

Reputation: 194

Codeigniter: submit form data without page refreshing with jQuery ajax

I have tried to submit a form data in codeigniter framework with ajax jQuery without page refreshing but it always pass to fail message.

I'm new to ajax, help me to solve this error.

Here is my Controller:

public function add_personal() {
    $id = $this->uri->segment(3);
    $jid = $this->Jsprofile->get_jsid($id)->jobseeker_id;
    $data = array(
        'js_personal_title' => $this->input->post('js_personal_title'),
        'js_personal_desc' => $this->input->post('js_personal_desc'),
        'tbl_jobseeker_jobseeker_id' => $jid,
        'tbl_jobseeker_tbl_user_u_id'=>$id
        );
   // echo json_encode($data);
    $this->load->database();
    $this->db->insert('tbl_js_personal',$data);  
}

Here is my view:

<form action="" method="POST" id="personal-info" class="form-group">
      <input class="form-control" type="text" name="js_personal_title">
      <input class="form-control" type="text" name="js_personal_desc">
      <input id="submit-p" class="form-control" type="submit" value="Add">
</form>

Here is js code :-

$(document).ready(function(){
    $("#personal-info").submit(function(e){
       e.preventDefault();
          var data= $("#personal-info").serializeArray();
           $.ajax({
              type: "POST",
              url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal',
              data: data,
         success:function(data)  {
           alert('SUCCESS!!');
            },
 error: function (XHR, status, response) {
           alert('fail');
             }
            });
      });
  });

Model for get values:

    public function get_jsid($id) {
 $sql = "SELECT jobseeker_id FROM tbl_jobseeker WHERE tbl_user_u_id = ".$id.";";
            return  $this->db->query($sql)->row();
        }

Upvotes: 3

Views: 11273

Answers (3)

Sanjuktha
Sanjuktha

Reputation: 1085

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript" language="javascript">
      $(document).ready(function(){
        $("#submit-p").click(function(e){
            e.preventDefault();
            var title = $("#js_personal_title").val();;
            var decs= $("#js_personal_desc").val();
            $.ajax({
                type: "POST",
                url: '<?php echo base_url() ?>index.php/jobseeker/add_personal',
                data: {title:title,decs:decs},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });
        });
    });

            </script>

Just try adding the above jquery scripts too.And also try to echo your result in the model or controller so that you can make sure no error on controller and model, and the return result whether any json issues?

in Controller

function add_personal()
    {
        $id = $this->uri->segment(3);
        //im confusing this part
        $jid = $this->Jsprofile->get_jsid($id);

        $data = array(
            'js_personal_title' => $this->input->post('title'),
            'js_personal_desc' => $this->input->post('decs'),
            'tbl_jobseeker_jobseeker_id' => $jid[0]['jobseeker_id'],
            'tbl_jobseeker_tbl_user_u_id'=>$id
        );
        // echo json_encode($data);

        $this->db->insert('tbl_js_personal',$data);
       echo  json_encode($data);
       exit;
    }

Upvotes: 1

Abdulla Nilam
Abdulla Nilam

Reputation: 38672

In AJAX

<script>
    $(document).ready(function(){
        $("#personal-info").submit(function(e){
            e.preventDefault();
            var title = $("#js_personal_title").val();;
            var decs= $("#js_personal_desc").val();
            $.ajax({
                type: "POST",
                url: '<?php echo base_url() ?>index.php/jobseeker/add_personal',
                data: {title:title,decs:decs},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });
        });
    });
</script>

in form (add id attribute)

<form action="" method="POST" id="personal-info" class="form-group">
    <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
    <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
    <input id="submit-p" class="form-control" type="submit" value="Add">
</form>

In controller

    function add_personal()
    {
        $id = $this->uri->segment(3);
        //im confusing this part
        $jid = $this->Jsprofile->get_jsid($id);

        $data = array(
            'js_personal_title' => $this->input->post('title'),
            'js_personal_desc' => $this->input->post('decs'),
            'tbl_jobseeker_jobseeker_id' => $jid[0]['jobseeker_id'],
            'tbl_jobseeker_tbl_user_u_id'=>$id
        );
        // echo json_encode($data);

        $this->db->insert('tbl_js_personal',$data);
    }

In model

function get_jsid($id)
{

    $query =  $this->db->query("SELECT jobseeker_id FROM tbl_jobseeker WHERE tbl_user_u_id = '$id'");
    $result = $query->result_array();
    return $result;
}

in config/autoload.php

$autoload['libraries'] = array('database');

Upvotes: 4

Mohan
Mohan

Reputation: 4829

Try this :

View

<form action="" method="POST" id="personal-info" class="form-group">
      <input class="form-control"  id="uri_segment_id" type="hidden" value="<?php echo $this->uri->segment(3); ?>">
      <input class="form-control" type="text" name="js_personal_title">
      <input class="form-control" type="text" name="js_personal_desc">
      <input id="submit-p" class="form-control" type="submit" value="Add">
</form>

JS

$(document).ready(function(){
    $("#personal-info").submit(function(e){
       e.preventDefault();
         var id = $('#uri_segment_id').val(); 
          var data= $("#personal-info").serializeArray();
               $.ajax({
                   type: "POST",
                    url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal/'+id,
                   data: data,
                success:function(data)  {
                               alert('SUCCESS!!');
                },
                error: function (XHR, status, response) {
                                console.log(status+' --- '+' --- ' + response);
                }
            });
      });
  });

Upvotes: 2

Related Questions