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.

Danielito · Accepted Answer · 2014-03-03 13:12:13Z

3

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

answered Mar 3, 2014 at 13:12

Danielito

1694 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gorkem Over a year ago

Thanks a lot for the response.. This I was tackling for two days... Note that in case of parse error response page also reloads if you do not use solution by Danielito

Collectives™ on Stack Overflow

Parse.com javascript login

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related