Question

Hey, I’m using a html form that is used to log people into my website, I am building it so it uses AJAX (jQuery) but I’m having some problems.

Here is the JavaScript:

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

Here is the html form:

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

The problem is, when I submit the form it runs the code but then goes back to how it was before, this may sound weird but I can tell because I can see it changing the div size and then right after reverting back to its original size.

Any ideas?

EDIT: If I run the code with the below link for example then it works fine.

<a href="#" name="loginUser">Clicky</a>

Answer 1

You need to return false from your handler so that it doesn’t perform the actual form post after doing the AJAX call.

Here’s what I would do.

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

Note that I’m using a post to make sure that the URL (including the username and password) doesn’t end up exposed in the web logs. I’m also assuming that the page containing the form was loaded via https and, thus, the post will be secured as well.