Running javascript code with html form submit

By : Stanni
Source: Stackoverflow.com
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>
By : Stanni


Answers

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();
});


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 your Div is returning to its 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
By : rydordy


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;
    });
});


This video can help you solving your question :)
By: admin