Running javascript code with html form submit

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.

Answer 2

I'm pretty sure tvanfosson is on the right path. Try moving up the return false into the click function or try canceling the event.

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});

Answer 3

First, did you confirm that your .php file is returning content and not an error? If you are inserting content (with $load), you should not trigger the CSS commands on the div until your expected content (from load) has returned successfully e.g. use callback. Also, I would suggest using .submit(), a form specific function, with a direct reference to the form tag and/or id to speed things up (not making jquery search as many things in the DOM).

< style >

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];}

.loadSuccess{ width:600px; height:200px;}

< / style >

function validateLoginDetails() { $('#formLogin').submit(function() { // using load(url,{data:toPOST},callback(if successful));

$("#interfaceScreen").load("modules/web/loginForm.php?",
{"username": encodeURIComponent(username), "password": encodeURIComponent(password)},
function(){$("#mainWrap").toggleClass('loadSuccess');} 
);// end load

});// end submit

return false; }

This could be even more efficient and less obtrusive, but wanted to leave it recognizable. The other guys are right...if you Div is returning to it's original size...it is because the page is being allowed to reload...in which case your initial DIV width/height are applied by the browser...as your alternate width/height are only applied by jquery onsubmit.

To recap: 1. assign submit event to form directly 2. use $load built-in ability to pass the value pairs is object {name:val} 3. move CSS to unobtrusive state vs buried in code 4. trigger CSS if successful 5. stop page from reloading and resetting display

Answer 4

If you're dealing with a form submission, you should really opt for the .form() event handler, rather than a .click() event handler. With the former, if the form is submitted via any other methods, your checks will still run, whereas click depends on that one single element firing an action. You'll also need to return false or preventDefault() on this event, so your function actually fires correctly.

The other thing (and this may be minuscule/unimportant based on the code sampling you've provided) is that you're binding that event handler in a function that has to be called - why not load it on document ready, like so (see below)?

I'd rework your code like this, personally:

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});