[FIXED] calling function in codeigniter controller using ajax not working

Issue

I have a codeigniter website, where I have done an add to cart function, on button click the product is added to cart after page reloads which is working fine, I did the following code in controller:

public function buy($id)
         {
           $color= $this->input->post('color');
           $size=$this->input->post('size');
             $product = $this->product->find($id);
             $item = array(
                 'id' => $product->id,
                 'name' => $product->pname,
                 'quantity' => 1
             );
             if(!$this->session->has_userdata('cart')) {
                 $cart = array($item);
                 $this->session->set_userdata('cart', serialize($cart));
             } else {
                 $index = $this->exists($id);
                 $cart = array_values(unserialize($this->session->userdata('cart')));
                 if($index == -1) {
                     array_push($cart, $item);
                     $this->session->set_userdata('cart', serialize($cart));
                 } else {
                     // $cart[$index]['quantity']++;
                     // $this->session->set_userdata('cart', serialize($cart));
                     $this->session->set_flashdata("Error","Product Already In Cart !");

                     redirect($_SERVER['HTTP_REFERER']);
                 }
             }
             $this->session->set_flashdata("Success","Product Added To Cart Successfully !");

             redirect($_SERVER['HTTP_REFERER']);


         }

Now I am trying to call this function using ajax so that the product is added to cart without page reload. I did the following code:

$("#change").submit(function() {
  alert("Change");
  var id = $('#prod').val();
  $.ajax({
    type: 'POST',
    url: "<?php echo base_url(); ?>" + "index.php/homecontroller/buy/" + id,
    data: {
      'id': id
    },
    success: function(data) {
      $('#resultdiv').html(data);
    }
  });
});

<form action="" method="post" id="change">
  <input type="hidden" value="<?php echo $product->id; ?>" id="prod">
  <input type="submit" value="switch">
</form>
<div class="resultdiv">
  <?php echo $data; ?>
</div>

However it's not adding to cart, it simply reloads the page. Can anyone please tell me what is wrong in here?

Solution

Because the form is still submitting, you can use preventDefault();

$("#change").submit(function(e) {
  e.preventDefault();
  alert("Change");
  var id = $('#prod').val();
  $.ajax({
    type: 'POST',
    url: "<?php echo base_url(); ?>" + "index.php/homecontroller/buy/" + id,
    data: {
      'id': id
    },
    success: function(data) {
      $('#resultdiv').html(data);
    }
  });
});

Answered By - Ammar Aslam