Not able to display message after submitting form using ajax

Question

I am trying to submit the form using AJAX in CodeIgniter . Values of the form are getting saved in DB but the reply that has been set in the controller is not getting displayed in console.log or alert in AJAX code.

Code of form

<form class="form-signup" id="signup-form" method="post">
    <input type="email" class="form-control" placeholder="Email" name="email" id="email">
    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
    <button type="submit" class="btn btn-primary btn-lg btn-signup col-sm-offset-1" id="submit_form">SIGN UP</button>
</form>

Script code

<script type="text/javascript">
    $(document).ready(function() {
        $("#submit_form").click(function(event) {
        event.preventDefault();
        var email = $("input#email").val();
        var password = $("input#password").val();
        jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/register",
        dataType: 'json',
        data: {email: email, password: password},
        success: function(res) {
        if (res)
            {
                console.log(res); //need to print the result here
                //alert(res);
            }
        }
        }); 
   });  
});

Controller code

public function register()
{
     $data = array(
          'email' => $this->input->post('email'),
          'password'=>$this->input->post('password')
     );

     $email = $data['email'];
     $password = $data['password'];

     $this->db->where('email',$email);
     $query = $this->db->get('student'); 
     if ($query->num_rows() > 0)
     {
         echo "Email already exist";
     }
     else
     {
        $data1=array(
            'email' => $email,
            'password' => md5($password)
        );

        $final=$this->signin_model->register_user($data1);
        return $final;     
     }   
}

Model code

public function register_user($data1)
{        
     $success=$insert_data = $this->db->insert('student', $data1);
     if($success)
     {
         $result= "success ";
     }
     else
     {
         $result= "register unsuccessful";
         return $result;           
     }
 }

As shown in the code there are 3 messages

Email already exists

Success

Register unsuccessful

In AJAX, if I do console.log or alert , I want any 1 of the above 3 messages to get displayed according to the flow.

How to display the reply on front end?

Answer 1

You have to use echo instead of return for success.

Please change it as follows

if ($query->num_rows() > 0)
{
   echo "Email already exist";
}
else
{
   $data1=array(
         'email' => $email,
         'password' => md5($password)
       );

   $final=$this->signin_model->register_user($data1);
   echo $final;     
}   

and remove that 2 variables initialized together. That is unnecessary. This is fine. $success = $this->db->insert('student', $data1);

Hope this can help you.

Answer 2

The ajax that you have used has datatype as json. So if you want data to be displayed on front end either encode the reply in json or you need to change or remove the json datatype from your ajax

Answer 3

Please change dataType:'json' to dataType: 'text'

<script type="text/javascript">
    $(document).ready(function() {
        $("#submit_form").click(function(event) {
        event.preventDefault();
        var email = $("input#email").val();
        var password = $("input#password").val();
        jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/register",
        dataType: 'text',
        data: {email: email, password: password},
        success: function(res) {
        if (res)
            {
                console.log(res); //need to print the result here
                //alert(res);
            }
        }
        }); 
   });  
});