Hey all you guys at DaniWeb! I have tried my hand at what I guess is Ajax, with a PHP script to execute it. The page itself renders and the form works, but the login script is not working. I'm not sure what is wrong, although I'm sure I messed something up. The code should post the user input to itself, check if the form is being posted to itself, and gives the user an answer whether or not he got the password correct. The password and username are hard coded. Here is the code:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>
PHP Hardcoded Login Script!
</title>
</head>
<body>
<?php

function corrLogin() {
	echo "<SCRIPT>
d = document.getElementById(\"loginStatus\");
d.innerHTML = \"Correct Login!\";
</SCRIPT>";
}

Function incorrLogin() {

	echo "<SCRIPT>
d = document.getElementById(\"loginStatus\");
d.innerHTML = \"Incorrect Login!\";
</SCRIPT>";
}
	

$postUser = $_POST["postUser"];
$postPassword = $_POST["postPassword"];
$isSubmitted = $_POST["postToSelf"];

if($isSubmitted == "yes") {
	if($postUser == "admin" && $postPassword == "pass") {
		corrLogin();
		}
	else {
		incorrLogin();
		}
	}

?>

<a href="http://www.thatcompdude.com">ThatCompDude PHP Login</a>
<h1 class="pagetitle">Please enter your login information:</h1>
<form action="index.php" method="post">
<h3>User: </h3><input type="text" name="postUser" />
<h3>Pass: </h3><input type="password" name="postPass" />
<input type="hidden" name="postToSelf" value="yes" />
<br/>
<input type="submit" value="Submit"/>
</form>
<div id="loginStatus">

</div>
</body>
</html>

This code can be found on my server at: http://drafts.thatcompdude.com/HaxMe/Hardcoded_PHP_Login/index.php

You must write your php password verification code at the end of page.
Your div tag is rendered at the end of your code. So if you want to set innerhtml in div tag, you must do it after div is rendered on the browser.

...
.
.

</body>
</html>
<?php
if($isSubmitted == "yes") {	if($postUser == "admin" && $postPassword == "pass") {		corrLogin();		}	else {		incorrLogin();		}	}
?>

Here is my new code (Lot more simpler too!):

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>
PHP Hardcoded Login Script!
</title>
</head>
<body>

<a href="http://www.thatcompdude.com">ThatCompDude PHP Login</a>
<h1 class="pagetitle">Please enter your login information:</h1>
<form action="index.php" method="post">
<h3>User: </h3><input type="text" name="postUser" />
<h3>Pass: </h3><input type="password" name="postPass" />
<input type="hidden" name="postToSelf" value="yes" />
<br/>
<input type="submit" width="50" value="Submit"/>
</form>
<div id="loginStatus">

</div>
<a href="http://www.haxme.com"><small>© Dylan Knutson 2009 for HaxMe.com</small></a>
</body>
</html>
<?php

$postUser = $_POST["postUser"];
$postPassword = $_POST["postPassword"];
$isSubmitted = $_POST["postToSelf"];

if($isSubmitted == "yes") {
	if($postUser == "admin" && $postPassword == "pass") {
		echo "<div> Correct Login! </div>";
		}
	else {
		echo "<div> Incorrect Login! </div>";
		}
}
?>

However this does not work! The webpage with this on it is:
http://drafts.thatcompdude.com/HaxMe/Hardcoded_PHP_Login/index.php

there is problem in line 28
$postPassword = $_POST["postPassword"];

change it to
$postPassword = $_POST["postPass"];

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>
      PHP Hardcoded Login Script!
      </title>
	  <script language="javascript">
	  function checkvalid()
	  {
	  var name=document.formx.postUser.value;
	  var pass=document.formx.postPass.value;
	  if(name=="")
	  {
	  alert("enter user name");
	  document.formx.postUser.focus();
	  return false;
	  }
	   if(pass=="")
	  {
	  alert("enter user name");
	  document.formx.postPass.focus();
	  return false;
	  }
	   if((name=="admin")&&(pass=="pass"))
	   {
	   var st=document.getElementById('loginStatus');
	   st.innerHTML="Correct Login!";
	    return false;
	   }
	   else
	   {
	   var st=document.getElementById('loginStatus');
	   st.innerHTML="InCorrect Login!";
	    return false;
	   }
	  }
	  </script>
      </head>
      <body>
       
      <a href="http://www.thatcompdude.com">ThatCompDude PHP Login</a>
      <h1 class="pagetitle">Please enter your login information:</h1>
      <form action="" method="post" name="formx" onsubmit=" return checkvalid(this);">
      <h3>User: </h3><input type="text" name="postUser" />
      <h3>Pass: </h3><input type="password" name="postPass" />
      <input type="hidden" name="postToSelf" value="yes" />
      <br/>
      <input type="submit" value="Submit"/>
      
      <div id="loginStatus">
      </div>
	  </form>
     </body>
     </html>

Doesn't look much like AJAX at all, just a normal PHP/HTML page. Using AJAX, the form would trigger a Javascript function instead of reloading the whole page. The Javascript would connect to the server and execuite a script to establish if the login details are correct, and according to the response, do something.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.