simple semi-ajax login.

Eggzorcist · July 6, 2009

Keep in mind that my ajax skills are fairly low. I'm trying to create a ajax login which will be used mostly for the error messages and if there is no error the php script will detect the sessions and will go to the first logged in page. All it seems to be doing is putting the $_GET in the url, I can't see why it won't work.

html code

<div id="oneerror"></div>
<div class="onecontent">

<form name="loginform">
    <label>Username:
       <input type="text" name="username" id="username" />
    </label>
    Password: 
    <label>
      <input type="password" name="password" id="password" />
    </label> <input type='submit' id="submit" onclick=" ajaxFunction()" value="Login"/>
</form>
</div>

ajax code

// JavaScript Document



function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser is not compatible, please enable javascript.");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){

		var ajaxDisplay = document.getElementById('oneerror');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

var queryString = "?username=" + username + "&password=" + password;
ajaxRequest.open("GET", "scripts/login.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->

php login function code.

<?php

include('../function.php');


login_user($_GET['username'], $_GET['password']);


function login_user($username, $password){

$username1 = secure_var($username);
$password1 = md5(secure_var($password));

if ($username != NULL and $password != NULL){

	$login_query = mysql_query("SELECT * FROM user_info WHERE username = '$username1' AND password = '$password1'");

	$login_status = mysql_num_rows($login_query);


	if($login_status == 1){
		echo "working";

	set_login_sessions($username, $password);


}

	else {

	echo "You have entered a wrong username and/or password.";

	}

}

else {

echo "Please enter a Username and Password";	

}



}



?>

thanks for any help.

Bendude14 · July 7, 2009

is this the correct name for you div??

var ajaxDisplay = document.getElementById('oneerror');

Eggzorcist · July 7, 2009

Yes, thats the correct div id.

php-shawn · July 24, 2009

Eggzorcist,

I don't know if my post will actually help you at all or not, but after fussing with AJAX for WAY too long in my opinion to "get it." I started looking for an AJAX library.

Most of them I found just pissed me off and didn't help or were too big or worse yet...just as complicated as every other AJAX example I'd seen only with a bunch of extra crap to deal with.

Enter xajax. Head over to www.xajaxproject.org and check out the tutorial. I spent like 2 or 3 hours getting things to work as opposed to my 4 days trying to do it from scratch. I know people will argue you gotta learn to do it yourself before you use a library, but I never once seen any of those people over at my place sweeping up all the hair I pulled out.

Members of their forum are very helpful when you do get stuck, but the library is very simple to use.

Here is an example of a basic form submission using the xajax library:

form.php

<?php
  require_once(form.common.php');
?>
<html>
<head>
<?php $xajax->printJavascript(); ?>
<script type="text/javascript">
function saveForm()
{
  xajax_saveForm(xajax.getFormValues("myForm")); 
  return false;
}
</script>
</head>
<body onLoad="xajax_showForm(); return false;">

<div id="form_container"></div>
</body>
</html>

form.common.php

<?php
  require_once('xajax_core/xajax.inc.php'); // THIS IS WHERE THE XAJAX LIBRARY IS
  $xajax = new xajax(form.server.php');
  
  $xajax->register(XAJAX_FUNCTION, 'showForm');
  $xajax->register(XAJAX_FUNCTION, 'saveForm');
?>

form.server.php

<?php
  require_once(form.common.php');
  
  $db = mysql_connect($HOST, $USER, $PASS);
  $db = mysql_select_db($DATABASE, $db);

  function showForm()
  {
    $response = new xajaxResponse();

    // BELOW THE saveForm() REFERS TO THE JAVASCRIPT FUNCTION IN form.php
    $html = '<form action="javascript:void(0);" onSubmit="saveForm();" name="myForm" id="myForm">
             <input type="text" name="name" id="name" value="NAME" size="31" />
             <br />
             <textarea cols="23" rows="7" name="description" id="description">DESCRIPTION</textarea>
             <br />
             <input type="text" name="date" id="date" value="DD/MM/YYYY" size="31" />
             <br />
             <br />
             <input type="submit" name="formSubmit" id="formSubmit" value="Save" />
             </form>';
    $response->assign('form_container', 'innerHTML', $html);
    return $response;
  }
  
  function saveTask($form)
  {
    $response = new xajaxResponse();
    $name = $form["name"];
    $description = $form["description"];
    $date = $form["date"];
    $query = "INSERT INTO `$TABLE` (`name`, `description`, `date`)
              VALUES ('$name', '$description', '$date')";
    $query = mysql_query($query);

    $response->call("xajax_showForm");
    return $response;
  }

  $xajax->processRequest();
?>

It looks messy at first but when you get it to function you'll be thankful for not having to write WAY too much javascript. Let me know if I can help!

Shawn

Maq · July 24, 2009

You're missing single quotes in both of your xajax class instances.

xtopolis · July 24, 2009

         echo "working";
      
      set_login_sessions($username, $password);

if set_login_sessions() actually does anything with $_SESSION/ session_start() etc I would expect you to be getting an error for outputting "working" and then trying to set session headers.

Sign In

simple semi-ajax login.

Recommended Posts

Eggzorcist

Link to comment

Share on other sites

Bendude14

Link to comment

Share on other sites

Eggzorcist

Link to comment

Share on other sites

php-shawn

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information