Why is this jQuery function not communicating properly with my php file? - php

Question

Let me show you what I have:
(1) Form:
<form name="login-form" class="login-form" method="post" onSubmit="login()">
<div class="header">
<h1>Sign In</h1>
</div>
<div class="content">
<input type="hidden" name="siteToken" value="$token" />
<input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
<div class="user-icon"></div>
<input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
</div>
</form>
(2) jQuery Function:
$(document).ready(function login() {
$('.login-form').submit(function() {
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
function loginMessage(data) {
$('.header').append(data);
};
});
});
(3) PHP Function:
<?php
require_once('VRC_Header.php');
require_once('../Classes/VRC_MasterOO.php');
require_once('../Classes/VRC_Secure_Login.php');
//*******************************//
//Declerations
$signIn = "";
$username = "";
$password = "";
$success = "";
$error = "";
//******************************//
//****************************************************************************************//
//Script Header
$signIn = new UserService($dbuser, $dbpass, $dbhost, $dbname); //Create new class instance
$signIn->sec_session_start(); //Begin session
//***************************************************************************************//
//***************************************************************************************//
//Begin Login Functions
if(isset($_POST['username'], $_POST['password'])) {
//Assign POST submissions to passable php variables
$username = $_POST['username'];
$password = $_POST['password'];
$passedToken = $_POST['siteToken'];
/*//Check Token Values (prevent CSRF attacks)
if($passedToken != $_SESSION['token']) {
$error = "CSRF attack detected. Please close your browser and try again.";
$signIn->csrfAttackLog($username);
echo $error;
exit();
}*/
//Test if both fields are not null
if($username == "" || $password == "")
{
$error = "Not all fields were entered<br />";
echo $error;
exit();
}
//Start login process
else
{
$success = $signIn->login($username, $password);
if ($success === true)
{ //Login Successful
echo "Success!"; //Direct to main page.
exit();
}
//Specific login failure determination
else
{
switch ($success){
case 1:
$error = "Your account has been locked.";
echo $error;
break;
case 2:
$error = "Invalid Username/Password (2)";
echo $error;
break;
case 3:
$error = "Invalid Username/Password";
echo $error;
break;
case 4:
$error = "Invalid Username/Password (3)";
echo $error;
break;
}
}
}
}
?>
Fist off, I doubt the problem is in the PHP function. I've tested it before implementing jQuery calls (I used it directly in the html action attribute). My suspicion is that the problem is occurring in the jQuery function (I just started using jQuery and am not really familiar with it).
Note that I have removed the token input for the time being in the php file. I simply want to get it working before I deal with that (there is another problem with that part).
I don't believe that the post variables are being sent to the php file correctly. Also, I don't believe my jQuery function as it is is properly receiving the echo response from my php function either, in the sense that it will display it as html - provided that it worked to begin with.
Any input is appreciated.

Answer 1

$(document).ready(function login() {
That line is the problem.
Probably the login function is not available to rest of the page. It's just a name given to anonymous function which is parameter to $(document).ready function.
You have a scope problem.
Move the login function out separately:
function loginMessage(data) {
$('.header').append(data);
};
function login() {
$('.login-form').submit(function () {
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
});
}
$(document).ready(function () {
login();
});
EDIT:
in your login function, you are registering a handler to your login form's submit event. And it has to be registered only once.
So, remove `onsubmit=login()` from your form's attributes, and you are good.

Answer 2

Slightly Changed your HTML to this
<form name="login-form" class="login-form" method="post">
<div class="header">
<h1>Sign In</h1>
</div>
<div class="content">
<input type="hidden" name="siteToken" value="$token" />
<input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
<div class="user-icon"></div>
<input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
</div>
</form>
and Javascript
$(document).ready(function () {
$('.login-form').submit(function (e) {
e.preventDefault();
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
function loginMessage(data) {
$('.header').append(data);
}
});
});