PHP AJAX form submit no page refresh multiple variable passing

Question

fairly new to the language, i have created a simple login system and i am attempting to submit the forms without page refreshes. I have completely created the registration system without page refresh ( coupled with dynamic username checking) and am now attempting to convert the actual login form as well, so that the user can be displayed as logged in without page refresh.

I attempted to use the same method, however now i need to pass both username and password to the validation script, and i am unable to get the password part to work for some reason... although username works fine.

I have it set up to display one error if the password is validated successfully and the other if it is not.. i may be overthinking it, i appreciate your assistance in this possibly trivial problem

PS first go with stack so please point out any suggestions to formatting etc

PHP

<?php
require_once('startsession.php');
$page_title = 'Log In';
require_once('header.php');
require_once('connectvars.php');
require_once('navmenu.php');
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="invisiblelogin.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('.error').hide(); 
$('#Info').hide();      
});

function check_login(){
var username = $("#username").val();
var password = $("#password").val();
if(username.length > 0 && password.length > 0){
    $.post("logincheck.php", {
        username: $('#username').val(),
        password: $('#password').val(),
    }, function(response){
        setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
    });
    return false;
}
  }

 function finishAjax(id, response){
 //showing of errors is just visually showing me whether or not the password validation      worked
$('#'+id).html(unescape(response));
var valid = $("#Info").html();
if( valid > 0) {
    $("label#username_error2").show();
}
else {
$("label#password_error").show();
}
} 

</script>


<div id="contact_form">
<form action="" name="contact">
<fieldset><legend>Log In Info</legend>

  <font color="red"><div id="Info"></div></font>

  <table>
  <tr><td><label for="username" id="username_label">Username:</label>
    <input type="text" id="username" name="username" value="" class="text-input" /></td>
  <td><label class="error" for="username" id="username_error2">Enter your username.    </label></td></tr>

  <tr><td><label for="password" id="password_label">Password:</label>
  <input type="password" id="password" name="password" value="" class="text-input" />    </td>
  <td><label class="error" for="password" id="password_error">Enter your password.    </label></td></tr></table>



  <input type="submit" name="submit" class="button" id="submit_btn" value="Sign Up"   onclick="return check_login();" />
</fieldset>
</form>
</div>

<?php
// Insert the page footer
require_once('footer.php');
?>

JS

$(function() {
$('.error').hide();
$(".button").click(function() {
  // validate and process form here

  $('.error').hide();
    var username = $("input#username").val();
    var password = $("input#password").val();       

    if (username == "" || password == "") { 
      if (username == "") {
        $("label#username_error2").show();
        $("input#username").focus();
      }
      if (password == "") {
        $("label#password_error").show();
        $("input#password").focus();
      }
      return false;
    }
 return false;
  });




 });

Intermediate PHP

<?php
require_once('connectvars.php');
if($_REQUEST)
{
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) or die (mysqli_error());
$username   = mysqli_real_escape_string($dbc, trim($_REQUEST['username']));
$password   = mysqli_real_escape_string($dbc, trim($_REQUEST['password']));
$query = "SELECT * FROM login_info WHERE username = 'username' AND password =   SHA('$password')";

      //  ------------ THIS PASSWORD PART DOES NOT READ CORRECTLY


$data = mysqli_query($dbc, $query);

if (mysqli_num_rows($data) > 0) {
    echo '1';
}
else {
    echo '0';
}   
}
?>

Answer 1

Ok.. a Few things...

---

I think you need to troubleshoot the 2 things it could really be... 1) Is the correct value being passed through to the PHP Page? You can check this in the CONSOLE of firebug (an extension for firefox that every developer should have). 2) Is your actual password validation working OK? Hard-code the password. Use the die() function to output data in the PHP page. The result will be seen in firebug as well.

---

If you're using $.post() on the JS side, your PHP should use $_POST instead of $_REQUEST. Shouldn't impact anything notable, but just thought I would add that.

---

This code is a little worrying...

if( valid > 0) {
    $("label#username_error2").show();
}else {
    $("label#password_error").show();
}

Most likely, valid is a string, and will not parse '0' as 0. While a login script is a true/false (0/1) procedure, PHP pages that are called by an ajax function should always return some sort of structure. For example...

Change your POST to expect a json response.

$.post("logincheck.php", {
    username: $('#username').val(),
    password: $('#password').val(),
}, function(response){
    setTimeout(function(){            //Note the change here. 
        finishAjax('Info', response); //Note the change here. 
    }, 450);                          //Note the change here. 
}, 'json');                            //Note the change here. 

Then create a PHP function that will return a json package that your JS will use.

function SendJSONResponse($success, $msg=null, $additionalReturnData=null){
    $result = array('success'=>$success);
    if ($msg) $result['msg']=$msg;
    if ($additionalReturnData) $result=array_merge($reult, $additionalReturnData);
    die(json_encode($result));
}

Once you have that, your login script should look more like

if (mysqli_num_rows($data) > 0) {
    SendJSONResponse(
        true, 
        null, 
        array('data'=>$data) //Pass the logged in users info for use in JS
    );
}else {
    SendJSONResponse(false, 'Username or Password not found');
}  

and your JS would look like this...

function finishAjax(id, response){
    if( response.success) {
        alert('logged in as ' + response.data.full_name + ' (' + response.data.email + ')');
        $("label#username_error2").show();
    }else {
        alert(response.msg);
        $("label#password_error").show();
    }
}