Login using ajax not working

Question

for some reason I can't get my login form working using ajax. I've been thinking for hours what I did wrong. can anyone point out exactly what I am missing? gosh.

just to add, I think my test.php (aka login) is working because it does output either employee or customer. I'm not really sure what I am missing.

EDIT: I'm not really sure If my ajax is working. I'm still learning ajax. I think the ajax part is not working because it doesnt even go to this part.

success: function(response){
              if(response == 'employee'){

                  $("#frm_login").slideUp('slow', function() {
                      $("#error").html('<p>employeee</p>');
                  };
               } 
            }

            else 
              if(response == 'customer'){

                  $("#frm_login").slideUp('slow', function() {
                      $("#error").html('<p>customerrr</p>');
                  };
               } 
          });

login.html

<form id="frm_login" class="animated fadeIn"  method="POST">  
                    <div id="error"></div>   
                    <div class="row form-row m-l-20 m-r-20 xs-m-l-10 xs-m-r-10">
                      <div class="col-md-6 col-sm-6 ">
                        <input name="username" id="username" type="username"  class="form-control" placeholder="Username">
                      </div>
                      <div class="col-md-6 col-sm-6">
                        <input name="password" id="password" type="password"  class="form-control" placeholder="Password">
                      </div>
                    </div>

my ajax

<script>


$(document).ready(function() {

    $('#login').click(function() {


      var form_data = {

          username: $("#username").val(),
          password: $("#password").val(),
          is_ajax: 1
      };

      $.ajax({

        type: 'POST',
        url: 'test.php',
        data: form_data,
        success: function(response){
          if(response == 'employee'){

              $("#frm_login").slideUp('slow', function() {
                  $("#error").html('<p>employeee</p>');
              };
           } 
        }

        else 
          if(response == 'customer'){

              $("#frm_login").slideUp('slow', function() {
                  $("#error").html('<p>customerrr</p>');
              };
           } 
      });


      return false;   

    });
});
</script>

and here's my test.php a.k.a my login.php

<?php
session_start();
include ('assets/includes/config.php');


        // username and password sent from Form
        $username=mysqli_real_escape_string($conn,$_POST['username']); 
        //Here converting passsword into MD5 encryption. 
        $password=md5(mysqli_real_escape_string($conn,$_POST['password']));

        $login_status = 'invalid';


        $query = mysqli_query($conn, "SELECT * FROM users where user = '$username' and password='$password'");
        $count = mysqli_num_rows($query);
        $row = mysqli_fetch_array($query);

         if($count == 1)
            {
                if($row['role'] == 1)
                {


                    $login_status = 'employee';
                    $_SESSION['username'] = $row['user'];


                }
                else if($row['role'] == 0)
                    {
                        $login_status = 'customer';
                        $_SESSION['username'] = $row['user'];
                    }

                    else {

                        $login_status = 'none';
                    }
            }

        echo($login_status);
 ?>

"It doesn't work" is a poor description of the problem. Help us help you. — Jason P, Feb 25 '15 at 15:27
hi jason, I'm not sure if im doing the ajax part right. html and the php part is working fine. but for some reason i think my ajax is not working. it doesnt even go to the success part. — phenomenon09, Feb 25 '15 at 15:30
Is The element with the ID `error` hidden by CSS by default? — Sasanka Panguluri, Feb 25 '15 at 15:38
Your JavaScript has a lot of errors in it. If you look at the console, you'll see. Here's a tidied version: http://jsfiddle.net/d9t3g9hv/ — ʰᵈˑ, Feb 25 '15 at 15:39
**WARNING:** You shouldn't be using `md5()` (without a salt) for passwords in 2015. Read: http://stackoverflow.com/questions/14798275/best-way-to-store-passwords-in-mysql-database — ʰᵈˑ, Feb 25 '15 at 15:41
I have just spotted improper parantheses in your ajax `success`. You seem to have opened an `else` at the wrong place. — Sasanka Panguluri, Feb 25 '15 at 15:44

lmarcelocc · Accepted Answer · 2015-02-25T15:51:25.117

Try changing you ajax call to this (untested):

    $(document).ready(function () {

    // Assume this is your button to submit
    $('#login').click(function () {

        var form_data = {

            username: $("#username").val(),
            password: $("#password").val(),
            is_ajax: 1
        };

        $.ajax({

            type: 'post',
            url: 'test.php',
            data: form_data,
            success: function (response) {
                if (response == 'employee') {

                    $("#frm_login").slideUp('slow', function () {
                        $("#error").html('<p>employeee</p>');
                    });

                } else if (response == 'customer') {

                    $("#frm_login").slideUp('slow', function () {
                        $("#error").html('<p>customerrr</p>');
                    });
                }
            }
        });
    });
});

Nice to ear :) Your javascript have a lot of errors, you just need to be carefull when opening and closing tags, and wich element you call to perform javascript action on it and you're good to go :) — lmarcelocc, Feb 25 '15 at 15:45

Login using ajax not working

1 Answers1