'Login AJAX and codeigniter

I am trying to incorporate AJAX into my work. I want it to log the user in once the login button has been pressed. Below is the relevant code. The view is calling the login function in my controller.

View

<form id="loginform" class="navbar-form navbar-right" action="https://siteurl/CI/index.php/postedLinks/login" method="post" role="search">
  <div class="form-group">
    <input type="text" name="username" class="form-control" placeholder="Username">
    <input type="password" name="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>

Controller

public function login(){
$this->form_validation->set_rules('username','Username', 'trim|required');
$this->form_validation->set_rules('password','Password', 'trim|required|callback_check_login');
if ($this->form_validation->run()==false) {
$data['links'] = $this->links_model->get_links();
$this->load->view('postedLinks', $data);

}else{
    redirect(site_url('postedLinks'), 'refresh');
}}

public function check_login($password){

    $username = $this->input->post('username');
    $result = $this->links_model->login($username,$password);
    if ($result) {
        $sess_array = array();
        foreach ($result as $row) {
            $sess_array = $arrayName = array('id' => $row->id, 'username' => $row->username);
            $this->session->set_userdata('logged_in', $sess_array);

        }
        return true;    
    } else{

        $this->form_validation->set_message('check_login', 'Invalid Username or Password');
        return false;
    }
}

It works perfectly however I need to add ajax into it however when I attempt it never works. Any help is appreciated. Below is what I have attempted to place in my view.

$(document).ready(function() {

  // process the form
  $('#loginform').submit(function(event) {

      // get the form data
      // there are many ways to get this data using jQuery (you can use the class or id also)
      // process the form

      $.ajax({
      url : "https://siteurl/CI/index.php/postedLinks/login"
      type : "POST",
      dataType : "json",
      data : {"username" : username, "password" : password},
      success : function(data) {
          // do something
      },
      error : function(data) {
          // do something
      }
  });
      // stop the form from submitting the normal way and refreshing the page
      event.preventDefault();
  });

phpjqueryajaxcodeigniter


Solution 1:[1]

You've not modified the javascript in any way to show us your attempt. The code below should work to pass the username and password to the login controller but you'll need to decide what to do once the user is logged in. You'll also have to output some JSON from the login controller to tell it the login has been successful. Note, I've added ID tags to the HTML form to select the input values via jQuery.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <form id="loginform" class="navbar-form navbar-right" action="https://siteurl/CI/index.php/postedLinks/login" method="post" role="search">
          <div class="form-group">
            <input id="uname" type="text" name="username" class="form-control" placeholder="Username">
            <input id="pass" type="password" name="password" class="form-control" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default">Login</button>
        </form> 

        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 

              // process the form
              $('#loginform').submit(function(event) {

                  // get the form data
                  // note, I've added ID tags to your form above

                var u = $('#uname').val();
                var p = $('#pass').val();

                  $.ajax({
                      url : "https://siteurl/CI/index.php/postedLinks/login", //enter the login controller URL here
                      type : "POST",
                      dataType : "json",
                      data : {
                          username : u, 
                          password : p
                          },
                      success : function(data) {
                          // do something, e.g. hide the login form or whatever
                          alert('logged in');
                      },
                      error : function(data) {
                          // do something
                          alert('pooped the bed');
                      }
                  });
                  // stop the form from submitting the normal way and refreshing the page
                  return false;
              });
            }); 
        </script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

Solution 2:[2]

your problem is your controller:

your ajax code call function login in your controller and pass two variable to it but your login function do not get them,login function must be like this:

public function login($Variable_one,$Variable_two)

Solution 3:[3]

Here is a snippet of one of the ajax forms I use. 

$("#form1").submit(function() {
    var data = $("#form1").serialize();
    //alert(data); return false;
    $.ajax({
        url: "/forms/form1",
        data: data,
        type: "POST",
   success: function(msg) {
            if (msg) {
                $("#display").html(msg);
            } else {
                $("#display").text("nothing came back For some reason");
            }
        }
    });
    return false;
});

You serialize your form data. You are not using json, you are using post. You do not need to include the long URL of your post method or URL, just use the controller and the method, Codeigniter puts in the base_url by itself. Try it this way

You also do not need the prevent default. Just use return false

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 nima
Solution 3 Brad

Related Questions