Why isn't my user login logic working?

Question

I am attempting a simple user login using parse and javascript/jQuery. here's the html structure:

    <div class="login">
      <form class="user-pass">
        <input type="text" id="username-log" placeholder="username" maxlength="38">
        <input type="password" id="password-log" placeholder="password">
        <a href="#" id="pass-reset">Forgot Your Password?</a>
        <input type="submit" id="logBtn" value="Log In">
      </form>
    </div>

and here is the logic i am attempting to use:

    <script>
      Parse.initialize("LotjQTmAjiCVc26g2sk7XFz9c70n67KdfV3yxQ5Q", "JTL6gc7TCNwaTnKMx9fdZUlfKmRtyA1YXUy89cxK");

      $("#logBtn").submit(function(event){
        event.preventDefault();

        var userName = $("#username-log").val();
        var passWord = $("#password-log").val();

        Parse.User.logIn(userName, passWord, {
          success: function(user){
            console.log("Log in was a success!");
          }, error: function(user, error){
            console.log("Log in error:"+error.message);
          }
        });
      });
    </script>

When i select the submit button, my page just refreshes and nothing comes to the console log. I have no prior experience with .preventDefault but isn't it supposed to prevent that? What seems to be the issue?

Answer 1

You are calling the submit-event on the submit-input. That is not possible. The jquery-documentation says:

"The submit event is sent to an element when the user is attempting to submit a form. It can ONLY be attached to form elements."

So try this instead:

$(".user-pass").submit(function(event){
        event.preventDefault();