View Full Version : jQuery AJAX login form

08-15-2009, 02:13 AM
I've created a simple login form with jquery, php, and mysql. I check the to see if the username and pass exist in the db and if they match. If not, I change the value of a <div> to an error message. If they do check out, I try and submit the form. The way I've done this only sort of works. The problem is that, if the user enters the correct info and clicks on the "submit" button, they get the right message, but then they have to click on the submit button a second time in order to actually submit the form. Here's the code:

var message ="some message";//set this so I can check it in login

//make sure the user actually entered something in the name field before submitting to database
if ( $('#userName').val() == '') { $("<div class='error'>please provide your user name to continue</div>").insertAfter('#userName');
return false;}
else if ( $('#userKey').val() == '') {
$("<div class='error'>please provide your password to continue</div>").insertAfter('#userKey');
return false;}
else { //they've filled out both fields and now we'll do the AJAX
$('#testDiv').load("sqlXML.php", {'selectQuery':"SELECT * FROM userInfo WHERE `userName`='"+$('#userName').val()+"' AND `key`='"+$('#userKey').val()+"'"},function(xml){
if ($('error',xml).text())//there is no user by that name
{message ="User Name and password do not match or do not exist";}
else {message = "success";}
} );
if ( message == "success") {return true;} else {return false};

I'd like to be able to "return true" or "return false" so that I can submit the form information to be used on the next page (w/o having to set a cookie)

08-17-2009, 06:22 PM
Ok so I pasted it into Dreamweaver to tidy up the formatting, then I rewrote a little bit of it, then I rewrote a bit more of it, and this is what I'd got to when I noticed your SQL in the AJAX call.

Basically, what's below should work, but your SQL stuff is a fundamental, and critical, security hole:

1. Never put SQL statements into client-side code. You've just given any attacker an easy look at your database structure.
2. Never put unvalidated user input into a SQL statement. Read up on SQL Injection attacks and run your user input through some checks on the server-side before you use it in SQL statements.
3. Also, it's generally a bad idea - and especially so when you're not even using any of the returned data - to do a "SELECT *". Only return the data that you actually need.

Anyhow, I tweaked it a little and came up with this. Should work, although like I say, you need to rethink your PHP page so that it accepts just the input fields rather than a fully-formed SQL string. A page like that sitting on the server is an invitation to be hacked.

function insertMessage(class, el, msg){
$('<div class="' + class + '">' + msg + '</div>').insertAfter(el);


if ( $('#userName').val() == '') {
insertMessage("error", "#userName", "please provide your user name to continue");
return false;
if ( $('#userKey').val() == '') {
insertMessage("error", "#userKey", "please provide your password to continue");
return false;

var params = {
selectQuery : "SELECT * FROM userInfo WHERE `userName`='"+$('#userName').val()+"' AND `key`='"+$('#userKey').val()+"'"

var rv = false;

$('#testDiv').load("sqlXML.php", params, function(xml){
if ($('error',xml).text()){
$('#testDiv').html("User Name and password do not match or do not exist");
}else {
rv = true;

return rv;


08-17-2009, 09:06 PM
Wow, thanks for the informative feedback. I decided to have some fun with jquery and keep everything on the same page, in which case, I didn't need to put everything in a form and submit it. However, this works beautifully for that first case.

You've brought up some poignant points regarding security. I was using the php file so that I could dynamically call data from any db, regardless of the structure. However, I see your point about the security I give up with providing my SQL statements to the public. So, the question is, is there a better way to create dynamic code that is usuable across several projects, or are you recommending that each .php page I call is specific to the task at the moment? I was planning on returning all the data (another no-no, as you've noted) and creating data objects so that I could then use them across the site.

In a sense, this means that my 'reusable' code for each site needs to be better thought out in terms of security.

08-18-2009, 07:04 PM
Well... speccing out a project-independent AJAX/SQL framework is a bit beyond what I could manage in a forum :D but FWIW, I'd write a project-specific library that encompasses your business logic through a database layer, and call that via your ajax page.

So, a simple structure might be: one file containing a bunch of functions. An example function, taking your initial post as a guide, might be getUserInfo($userName, $key). All it does is builds and runs the SQL statement above - after validating the inputs - and returns... whatever you'd like. Maybe a HTML chunk, maybe JSON, maybe XML. Up to you. You can then create a "runAJAX.php" page and pass it the variables and the name of the function you want it to run, and it'll go and fetch your data. I dunno if that makes sense - like I say, an application framework needs rather more than a forum posts-worth of thought :) but it's an idea...

08-18-2009, 09:29 PM
Again, thanks for the thoughtful post and feedback. I suppose asking for a whole project-independent architecture was a bit of a stretch if I were looking for specifics. I was more thinking in terms of concepts, which you've provided (and have actually even gone beyond that). This project is just a local one that I'm playing with, but you've given me some important things to consider in terms of structure and security. And, as far as habit goes, I ought to make it more a custom to practice good programming/scripting so that I don't cause any serious problems on bigger projects.

So, thanks, again, for all the great advice! :thumbsup: