Parse.com javascript login

Question

Hi Stackoverflow members,

I started learning javascript a couple days ago but was stumped on one of the problems i came across.

Form:

<form class="login-form" method="post" onsubmit="return tryLogin(this);">
    <h3 class="form-title">Login to your account</h3>
    <div class="alert alert-danger display-hide">
        <button class="close" data-close="alert"></button>
        <span>
             Enter any username and password.
        </span>
    </div>
    <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <label class="control-label visible-ie8 visible-ie9">Username</label>
        <div class="input-icon">
            <i class="fa fa-user"></i>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" id="username"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <div class="input-icon">
            <i class="fa fa-lock"></i>
            <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" id="password"/>
        </div>
    </div>
    <div class="form-actions">
        <label class="checkbox">
        <input type="checkbox" name="remember" value="1"/> Remember me </label>
        <button type="submit" class="btn green pull-right">
        Login <i class="m-icon-swapright m-icon-white"></i>
        </button>
    </div>
</form>

Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {     
      App.init();
      Login.init();
    });

    function tryLogin(form) {

        var username = form.username.value;
        var password = form.password.value;

        console.log("Username: " + username + " Password: " + password);
        Parse.User.logIn(username, password, {
            success: function(user) {
                window.location.href="dashboard.html";
                //self.undelegateEvents();
                //delete self;
                alert("Sucess");
                return true;
                },
            error: function(user, error) {
                window.location.href="login.html";
                alert("Error: " + error.code + " " + error.message + username + password);
                return false;
                }
        });

    }
</script>

The problem is that when I attempt to login I get a 100 XMLHttpRequest failed error. This only happens when I input data into the form and click log in. If i don't enter any data and click login, it correctly attempts to login. If i put the username + password directly into the javascript it also works - but doesn't through the form.

Console.log, logs the correct username and password being inputted, but the Parse.User.logIn(username, password) doesn't want to pass it in... but it works if I fill it in like this:

Parse.User.logIn("[email protected]", "mypassword", {....

Any help would be appreciated.

Cheers!

Edit: Here's the error

XMLHttpRequest failed: {"statusText":"","status":0,"response":"","responseType":"","responseXML":null,"responseText":"","upload":{"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null},"withCredentials":false,"readyState":4,"timeout":0,"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null} 

Could it be a MAMP issue? PS: Creating new objects etc. works fine.

Answer 1

As you dont call preventDefault on the submit event, what happens is that it posts form when you click which has for effect to cancel the ajax call Parse.User is making.

Add event.preventDefault(); in your event handler and you should be fine.

<form class="login-form" method="post" onsubmit="tryLogin(this); event.preventDefault();">

Or better use jQuery to manage this event

$(".login-form").submit (function(event) {
    ...
    event.preventDefault();
});