Form submit AJAX

[ndeniche]

I'm building an AJAX application for my company, and in the main screen there is a login form. The login form has a submit button which calls an ajax function that checks with a php page the validation for the login credentials, and sends back a confirmation message. This message is read by a javascript function, and, if invalid, changes the text in a div tag for an error message. If valid, it submits the form to another php page which does the rest of the operations for login (cookie storage, user validation, etc).

The thing is, whe I try to submit my form from javascript, it doesn't do anything. Maybe i'm doing something wrong. Here's an example of my code:

Javascript functions

function submitClick()
{
	var num; // Employee number
	var pwd; // Password

	num = document.getElementById("num").value; // Get emloyee number from input
	pwd = document.getElementById("pwd").value; //Get password from input

	var response; // xmlhttp response text

	if(window.XMLHttpRequest)
	{
		// IE7+, Chrome, Mozilla, Safari
		xmlhttp = new XMLHttpRequest;
	}
	else
	{
		// IE5, IE6
		xmlhttp = new ActiveXObject("microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			respuesta = xmlhttp.responseText;
			valAnswer(response);
		}
	}
	xmlhttp.open("POST", "login.php?n=" + num + "&p=" + pwd, true);
	xmlhttp.send();
}
function valAnswer(response)
{
	if(response=="no") // response generated by login.php query was successful and no matches were found
	{
		document.getElementById("formHead").color = "#ff0000";
		document.getElementById("formHead").innerHtml = "Invalid credentials. Try again.\n<div color=\"#000000\">To start, insert your employee number and password";
	}
	else if(response=="error") // response generated when query was unsuccessful
	{
		document.getElementById("formHead").color="#ff0000";
		document.getElementById("formHead").innerHtml="An error was generated while trying to log in. Please try again later.\n<div color=\"#000000\">To start, insert your employee number and password";
	}
	else if(response=="yes") // response generated when query was successful and a match was found
	{
		document.getElementById("login").submit();
	}
}

start.php login form code:

<form name="Login" action="login.php" id="login" method="post">
    <table>
        <tr>
	    <th colspan="3" align="left"><div id="formHead">To start, insert yur employee number and your password</div></th>
        </tr>
        <tr>
	    <td>
	        Employee number:
	    </td>
	    <td>
	        <input name="numero" id="num" type="text" title="Input you employee number. only numbers accepted" onkeyup="valUsr(this.value); " />
	    </td>
	    <td id="err">
	        <p><div id="errUsr"></div></p> <!-- Used to display a validation error message -->
	    </td>
	</tr>
	<tr>
	    <td>
		Password
	    </td>
	    <td>
		<input name="pwd" id="pwd" type="password" title="Input your password. only numbers and letters accepted" onkeyup="valPwd(this.value);" />
	    </td>
	    <td id="err">
		<p><div id="errPwd"></div></p> <!-- used to display a validation error message -->
	    </td>
	</tr>
	<tr>
	    <td colspan="3"><input type="button" onclick="submitClick();" id="submit" name="submit" disabled="true" value="Submit" /></td>
	</tr>
    </table>
</form>
</body>
</html>

index.php code:

<?php
	
	if(!isset($_POST['num'])) // checks if index.php has sent the form's content
	{
		include('start.php');
	}
	else
	{
		echo "Welcome"; // Will be changed by the actual index page
	}
	
?>

So there it is. I do it this way because i intend to avoid main page access without login. What am I doing wrong?

Thanks in advance

[Airshow]

On quick look, several things stand out:

var response; // xmlhttp response text
  //Not necessary or relevant at this point in the code.

if (xmlhttp.readyState==4 && xmlhttp.status==200){.....}
  // By performing both tests in one if(), you deny yourself the opportunity of independent elses, which is important for handling readyState 4 responses with non-200 status.
  //You would also do well to adopt a timeout pattern to cater for slow/unresponsive server. Google "AJAX timeout" or similar for examples.

respuesta = xmlhttp.responseText;
  valAnswer(response);
  //Replace these two lines with:
  //valAnswer(xmlhttp.responseText);

xmlhttp.open("POST", "login.php?n=" + num + "&p=" + pwd, true);
  //Try "GET" instead of "POST"
  xmlhttp.send();
  //Try:
  //xmlhttp.send(null);
  //convention, not strictly necessary(?)

Airshow

[ndeniche]

ok... corrected all details for an optimized code, but that still doesn't solve my problem... what should i do?

[achinaseller]

thanks