else if doesn't work in ajax login form

Question

I made the code below by looking at google and combining proccess.php, submit form and ajax, but I do not know where my mistake is. The code does not seem to work.

proccess.php

<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

  //check login status and etc

      if ($data['status'] == 'ok' && $data['loggedinuser']['username'] == "$username") {  
          echo 'ok';
      } elseif ($data['message'] == 'checkpoint' && $data['status'] == 'fail') {
          echo 'checkpoint';
      } elseif ($data['errortype'] == 'invaliduser' && $data['status'] == 'fail') {
          echo 'wrongusername';
      } elseif ($data['errortype'] == 'badpassword' && $data['status'] == 'fail') {
          echo 'wrongpassword';
      } elseif ($data['errortype'] == 'unusablepassword' && $data['status'] == 'fail') {
          echo 'unusablepassword';
} else {
          echo '';
}
?>

index.php

 $(document).ready(function() { $("#loginform").submit(function() { if ($('#username').val().length > 3 || $('#password').val.length > 3) { var pdata = $(this).serialize(); $.ajax({ url: "proccess.php", data: pdata, type: "POST", beforeSend: function() { $("#pesan").html("<h4>Loading...</h4>"); }, success: function(pesan) { console.log(pesan); if (console.log(pesan) == "ok") $("#pesan").html("<h4>Login Success...<meta http-equiv='refresh' content='1'; url=redirect.php'></h4>"); else if (console.log(pesan) == "gagal") $("#pesan").html("<h4>Error!</h4>"); else if (console.log(pesan) == "wrongusername") $("#pesan").html("<h4>Wrong Username!</h4>"); else if (console.log(pesan) == "wrongpassword") $("#pesan").html("<h4>Wrong Password!</h4>"); else if (console.log(pesan) == "checkpoint") $("#pesan").html("<h4>need checkpoint</h4>"); else if (console.log(pesan) == "accountblocked") $("#pesan").html("<h4>your account blocked.</h4>"); else $("#pesan").html("<h4>Invalid username and/or password.</h4>"); } }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="pesan" class="text-align-center"> <h4>Login to your account</h4> </header> <form class="no-margin" method="POST" id="loginform"> <fieldset> <div class="form-group"> <label for="username">Username</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input name="username" id="username" type="username" class="form-control input-lg input-transparent" placeholder="Username" required> </div> </div> <div class="form-group"> <label for="password">Password</label> <div class="input-group input-group-lg"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input name="password" id="password" type="password" class="form-control input-lg input-transparent" placeholder="Password" required> </div> </div> </fieldset> <div class=""> <button id="masuk" type="submit" class="btn btn-block btn-lg btn-danger"> <span class="small-circle"><i class="fa fa-caret-right"></i></span> <small>Sign In</small> </button> </div> </form> 

Answer 1

Please receive the data sent by Javascript:

$data = $_REQUEST['data'];

Changing your if statements as follows:

if (pesan == "ok"){
    $("#pesan").html("<h4>Login Success...");
    window.location = "redirect.php";
}
else if (pesan == "gagal") 
    $("#pesan").html("<h4>Error!</h4>");
else if (pesan == "wrongusername") 
    $("#pesan").html("<h4>Wrong Username!</h4>");
else if (pesan == "wrongpassword") 
    $("#pesan").html("<h4>Wrong Password!</h4>");
else if (pesan == "checkpoint") 
    $("#pesan").html("<h4>need checkpoint</h4>");
else if (pesan == "accountblocked") 
    $("#pesan").html("<h4>your account blocked.</h4>"); 
else 
    $("#pesan").html("<h4>Invalid username and/or password.</h4>");

Please notice how redirection is done using Javascript:

window.location = "redirect.php";

Answer 2

You have to check if key exists in the $data array before running it inside if else. You have to use isset() to check if the array element exists.

Try to rephrase your code as in the following:

if($data['status']=="ok" && $data['loggedinuser']['username'] == "$username")
{
    echo "ok";
}
else
{
    if( isset($data['message']) ) {
      echo $data['message'];
    } 
    elseif( isset($data['errortype']) ) {
      echo $data['errortype'];
    }   
}

Note you can echo $data["message"] and $data["error"] directly unlike they you did it.