Insertion by ajax doesn't work in codeigniter

Question

I'm trying to insert one record in the database by ajax but I don't know where's my error.

also when I submitting the form page is reloaded !!

MY View

<?php echo form_open('Home',array('id'=>'myForm','class'=>'col-md-7 col-sm-8 col-xs-12'));?>
   <div class="col-md-3 col-sm-4 col-xs-4 no-left-padding">
      <input type="submit" id="btn" value="اشترك" class="btn-default" /> 
   </div>
   <div class="col-md-9 col-sm-8 col-xs-8">
     <input type="text" placeholder="البريد الاليكترونى"  id="email" name="email">
    <i class="fa fa-envelope-o" aria-hidden="true"></i>
   </div>

   <?php echo form_close();?>
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<script>
    $(function(){
        $( "#btn" ).click(function(event)
        {
            event.preventDefault();
            var email= $("#email").val();

            $.ajax(
                {
                    type:"post",
                    url: "<?php echo base_url(); ?>Home/subscribe/",
                    data:{ email:email},
                    success:function()
                    {

                         alert("success!");
                    }
                    error: function() 
                    {
                        alert("Invalide!");
                    }
                }
            );
        });
    });
</script>

Controller

<?php
class home extends CI_Controller{
    public function __construct()
{
    parent::__construct();
    $this->load->model(array('Home_m')); 
}
    function index(){
        $data=array(
        "slider"=>$this->Home_m->slider(),
        "cat"=>$this->Home_m->cat(),
        );
        $this->load->view('home_v',$data);
    }
    public function subscribe(){

         $email = $this->input->post('email');
        $this->Home_m->index($email);
        //redirect('home','refresh');
        }

}
?>

My model

<?php 
class home_m extends CI_Model{
    function index($email){
        $data=array('s_email'=>$this->input->post('email'));
        $this->db->insert('subscribe',$data);

    }
}
?>

I followed more tutorials and questions here but I don't know why that not working and refreshing the page !

Answer 1

Hope this will help you :

Your view should be like this : (see action URL)

<?php echo form_open('Home/subscribe/',array('id'=>'myForm','class'=>'col-md-7 col-sm-8 col-xs-12'));?>
   <div class="col-md-9 col-sm-8 col-xs-8">
     <input type="text" placeholder="البريد الاليكترونى"  id="email" name="email">
        <i class="fa fa-envelope-o" aria-hidden="true"></i>
   </div>
   <div class="col-md-3 col-sm-4 col-xs-4 no-left-padding">
     <input type="submit" id="btn" value="اشترك" class="btn-default" />
   </div>

<?php echo form_close();?>

Your ajax :

<script type="text/javascript">
    var form = $('#myForm'); 
    form.on('submit', function(event){
       event.preventDefault();
       var email = $("#email").val();
       //console.log('some text');
       //return false;
        $.ajax({
            url : form.attr('action'),
            type: 'post',
            data:{"email" : email },
            success: function(data){
                console.log(data)
            }
        })             
    });
</script>

Your controller should be start with a Capital like this :

<?php
class Home extends CI_Controller{
........
}

and your subscribe method should be like this :

public function subscribe()
{
   $email = $this->input->post('email');
   $this->Home_m->index($email);
   echo 'success';
   exit(); 
}

Your model function should be like this :

function index($email)
{
    $data = array('s_email'=> $email);
    $this->db->insert('subscribe',$data);
}