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