Codeigniter: submit form data without page refreshing with jQuery ajax

Question

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();
        }

You are not passing jobseeker_id in your ajax url url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal', — Abdulla Nilam
– Abdulla Nilam, Commented Sep 23, 2015 at 7:07
Ty to check your error with console.log(); to find your error or response in firebug console or browser console — Rutunj sheladiya
– Rutunj sheladiya, Commented Sep 23, 2015 at 7:07
console.log(data); add this to both success and error function to see the browser console, and also change the error function as Abdulla mentioned above. — Sanjuktha
– Sanjuktha, Commented Sep 23, 2015 at 7:08

Abdulla Nilam · Accepted Answer · 2015-09-23 07:49:20Z

4

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');

edited Sep 23, 2015 at 7:49

answered Sep 23, 2015 at 7:27

Abdulla Nilam

39.7k18 gold badges85 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sahan Perera Over a year ago

no URI segment is 3 because CI ignore that index.php and I already echo and checked that.

Sahan Perera Over a year ago

i did still the same answer

Abdulla Nilam Over a year ago

what you trying to get with this $jid = $this->Jsprofile->get_jsid($id)->jobseeker_id;

Sahan Perera Over a year ago

value for the MySQL column tbl_jobseeker_jobseeker_id and i checked that with echo

Abdulla Nilam Over a year ago

did you check model is working ?? cz model name should be Jsprofile_model

|

Mohan · Accepted Answer · 2015-09-23 07:47:05Z

2

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);
                }
            });
      });
  });

answered Sep 23, 2015 at 7:47

Mohan

4,8597 gold badges47 silver badges70 bronze badges

2 Comments

Sahan Perera Over a year ago

No, there is no changing in URL

Sanjuktha Over a year ago

have you tried $("#submit-p").click(function(e) in this way?

Sanjuktha · Accepted Answer · 2015-09-23 08:59:04Z

<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;
    }

If you found out the error please do update what was it,curiosity to know what was the issue.

Collectives™ on Stack Overflow

Codeigniter: submit form data without page refreshing with jQuery ajax

3 Answers 3

10 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related