Return False not working on form

Question

I have a log in form that I am trying to submit via AJAX. I have a similar form for registration that is working perfect; however, the return false statement isn't firing.

My log in form looks like this:

  <form name="loginForm" id="loginForm" action="userSystem/userSystem.php" method="post">
    <div class="loginTable">
      <div class="loginRow">
        <div class="loginCell"><label for="username">Username:</label></div>
          <div class="loginCell"><input type="text" name=="username" id="loginFormUser"></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"><label for="password">Password:</label></div>
          <div class="loginCell"><input type="password" name="password" id="loginFormPass"></div>
        </div>
      <div class="loginRow">
        <div class="loginCell">&nbsp;</div>
        <div class="loginCell"><input type="submit" name="submit" value="Log In" id="loginFormSubmit"></div>
      </div>
    </div>
  </form>
</section>
<section id="loginBarRegForm">
  <h1>Step Two</h1>
  <form name="regForm" id="regForm" action="usersystem/register.php" method="post">
    <div class="loginTable">
      <div class="loginRow">
        <div class="loginCell"><label for="r_username">Username:</label></div>
        <div class="loginCell"><input type="text" name="r_username" id="r_username"></div>
        <div class="loginCell"><span id="r_usernameFeedback"></span></div>
      </div>
      <div class="loginRow">
        <div class="loginCell"><label for="r_password">Password:</label></div>
        <div class="loginCell"><input type="password" name="r_password" id="r_password"></div>
        <div class="loginCell"><span id="r_passwordFeedback"></span></div>
      </div>
      <div class="loginRow">
        <div class="loginCell"><label for"r_vpassword">Verify Password</label></div>
        <div class="loginCell"><input type="password" name="r_vpassword" id="r_vpassword"></div>
        <div class="loginCell"><span id="r_vpasswordFeedback"></span></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"><label for="email">Email:</label></div>
        <div class="loginCell"><input type="text" name="r_email" id="r_email"></div>
        <div class="loginCell"><span id="r_emailFeedback"></span></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"></div>
        <div class="loginCell"><input type="submit" name="r_submit" value="Register" id="r_submit"></div>
        <div class="loginCell"></div>
        </div>
      </div>
  </form>

And the javascript that I'm trying to execute when the submit button is clicked on

$("#loginFormSubmit").click(function() {
  form_data = {
    username: $("#loginFormUser").val(),
    password: $("#loginFormPass").val(),
    operation: "login",
    is_ajax: 1
  }

  $.ajax({
    type: "POST",
    url: "userSystem/userSystem.php",
    data: form_data,
    dataType: json,
    success: function(data) {
      if(data.success) {
        $("#loginBarLoginForm").fadeOut("slow");
        $("#userDetailsUsername").html(data.username);
        $("#userDetailsEmail").html(data.email);
        $("#userDetails").fadeIn('slow');
      } else {
        $("#loginbarLoginForm").fadeOut("slow");
        $("#loginBoxResponseDiv").html(data.message);
        $("#loginBoxResponseFrame").fadeIn("slow");
      }
    }
  });
  return false;
});

So far this is about the most in depth application I've developed, but it just doesn't make sense as to why return false will work in one instance, but not another. They are nearly identical functions except for the data.

Thank you for any help you can provide :)

EDIT: Updated Code.

    $("#loginFormSubmit").click(function() {
    console.log("Click Event Firing");
    var form_data = {
        username: $("#loginFormUser").val(),
        password: $("#loginFormPass").val(),
        operation: "login",
        is_ajax: 1
    };
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);

    $.ajax({
        type: "POST",
        url: "userSystem/userSystem.php",
        data: form_data,
        success: function(data) {
            console.log("Ajax Working");
            if(data.success === true) {
            $("#loginBarLoginForm").hide();
                $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
                $("#loginBoxResponseFrame").fadeIn("slow");
            } else {
                $("#loginBarRegForm").hide();
                $("#loginBoxResponseDiv").html(data.message);
                $("#loginBoxResponseFrame").fadeIn("slow");
            }
        }
    });
});

The code will now return a JSON respones, but the function for success is not being fired.

Answer 1

It turns out that all along, I was just missing some quotes in my solution. I needed to replace:

    dataType: json,

with:

    dataType: "json",

Once I got that, the solution came into place and now my users will be able to log in without a page refresh. I still have a long way to go on this project, but thank you all for helping point me in the right direction. Also I feel acomplished that I was able to find the answer on my own; however, I never would have, had it not been for the fine help and tips that I received from the SO community. You guys are one in a million!

The final solution ended up looking like this:

    $("#loginFormSubmit").click(function() {
    console.log("Click Event Firing");
    var form_data = {
        username: $("#loginFormUser").val(),
        password: $("#loginFormPass").val(),
        operation: "login",
        is_ajax: 1
    };
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);

    $.ajax({
        type: "POST",
        url: "userSystem/userSystem.php",
        dataType: "json",
        data: form_data,
        success: function(data) {
            console.log("Ajax Working");
            console.log("data.success: " + data.success);
            console.log("data.username: " + data.username); 
            if(data.success === true) {
                console.log("data.success was true");
                $("#loginBarLoginForm").hide();
                $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
                $("#loginBoxResponseFrame").fadeIn("slow");
                $("#notLoggedIn").fadeOut("slow");
                $("#currentlyLoggedIn").fadeIn("slow");
                $.cookie("username", data.username, {expires: 7, path: "/"});
                $.cookie("id", data.id, {expires: 7, path: "/"});
                $.cookie("email", data.email, {expires: 7, path: "/"});
                $.cookie("user_level", data.user_level, {expires: 7, path: "/"});
                $.cookie("active", data.active, {expires: 7, path: "/"});
                $.cookie("reg_date", data.reg_date, {expires: 7, path: "/"});
                $.cookie("last_login", data.last_login, {expires: 7, path: "/"});
                $("#cookieUsername").html($.cookie("username"));
                $("#cookieID").html($.cookie("id"));
                $("#cookieEmail").html($.cookie("email"));
                $("#cookieUserLevel").html($.cookie("user_level"));
                $("#cookieActive").html($.cookie("active"));
                $("#cookieRegDate").html($.cookie("reg_date"));
                $("#cookieLastLogin").html($.cookie("last_login"));
            } else {
                console.log("data.success was false");
                $("#loginBarRegForm").hide();
                $("#loginBoxResponseDiv").html(data.message);
                $("#loginBoxResponseFrame").fadeIn("slow");
            }
        }
    });
});

Answer 2

Just an idea, but change the type of the input from "submit" to "button".

And, just for debugging purposes, don't dynamically assign a click event. Change your JS to this:

function NamedFunction() {
  form_data = {
    username: $("#loginFormUser").val(),
    password: $("#loginFormPass").val(),
    operation: "login",
    is_ajax: 1
  }

  $.ajax({
    type: "POST",
    url: "userSystem/userSystem.php",
    data: form_data,
    dataType: json,
    success: function(data) {
      if(data.success) {
        $("#loginBarLoginForm").fadeOut("slow");
        $("#userDetailsUsername").html(data.username);
        $("#userDetailsEmail").html(data.email);
        $("#userDetails").fadeIn('slow');
      } else {
        $("#loginbarLoginForm").fadeOut("slow");
        $("#loginBoxResponseDiv").html(data.message);
        $("#loginBoxResponseFrame").fadeIn("slow");
      }
    }
  });
  return false;
}

Then add this to your submit button

onclick="NamedFunction(); return false;"

I'm not recommending you keep it that way, but perhaps with those 2 changes you can really track down what's happening.

Answer 3

The return false is working as required, but the problem is that the Success method is a callback , which is called by Jquery implicitly whenever there is a successful message from the server side on ajax call, so at that time, you dont have any handle to get the value from it, so either you need to define your logic in another method and make the method call here, as its the callback ,you dont have handle to manipulate.

and yes if you want to return the $.ajax() call to return false, you can remove the return false statement to outside the scope of the success method.

Answer 4

return false inside the handler but outside the ajax to prevent the default action of the submit.

$("#loginForm").on('submit',function() {  //attach handler to form
    form_data = {...}                     //form data
    $.ajax({...});                        //fire ajax
    return false;                         //prevent default action
});