Calling parse javascript function from HTML form event

Question

I've been trying to call a simple javascript login function from an html form submission and it doesn't seem to be calling the method. I have tried moving the method to an external .js class and the function still is not working. The java script function is in the header called Login() uses the variables from the form to pass them into the web service and login. I've tried calling other functions from an external homepage.js script too and they are not firing the event. My intention is to push to the index.html page if login is successful. Thanks.

Code:

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.1.15.min.js"></script>     

    <script type="text/javascript">
    Parse.initialize("v9s5EdsZ4u9fSfTpr8SD0u3Xcb56nen1GWge47kV", "fjuiNrsJk3AubBY1zDfosLKDoPxzGgKlUxegxbtx");
function Login()
    {
      Parse.User.logIn(document.loginForm.uname, document.loginForm.pword, 
      {
        success: function(user) 
        {
          window.location="/index.html";
        },
        error: function(user, error) 
        {
          // The login failed. Check error to see why.
        }
      });
    }
  </script>

    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; 
        padding-bottom: 140px;
      }
      .container {
        width: 300px;
      }

      /* The white background content wrapper */
      .container > .content 
      {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; 
        -webkit-border-radius: 10px 10px 10px 10px;
           -moz-border-radius: 10px 10px 10px 10px;
                border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

    .login-form {
    margin-left: 65px;
    }

    legend {
    margin-right: -50px;
    font-weight: bold;
      color: #404040;
    }

    </style>

  </head>
  <body>
    <div id="topBar">
      <button onclick="WarningSigns()" class="btn btn-danger" type="button">Warning signs</button>
    </div>

    <div id="content">
      <div id="titleContent">
        <h1>Bronchiectasis</h1>
        <p id="subTitle">Self-management action plan <p>
      </div>
    </div>
      <div class="container">
    <div class="content">
      <div class="row">
        <div class="login-form">
          <h2>Login</h2>
          <form name="loginForm" action="javascript:Login()">
            <fieldset>
              <div class="clearfix">
                <input name="uname" type="text" placeholder="Username">
              </div>
              <div class="clearfix">
                <input name="pword" type="password" placeholder="Password">
              </div>
              <button class="btn primary" type="submit">Sign in</button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div> <!-- /container -->



  </body>

If I paste your code into a Fiddle (http://jsfiddle.net/JYsZe/) and click Login the alert I added shows (in Chrome at least). So I must be misunderstanding your question. If so, please clarify your question above by clicking the edit link. — Frank van Puffelen, Dec 27 '12 at 19:56
The problem seems to be my parse call wrapped in a function Login() as it calls without it which I don't understand — Bradley Armstrong, Dec 27 '12 at 20:34
Are you trying to call this API? https://www.parse.com/docs/js/symbols/Parse.User.html#.logIn — Frank van Puffelen, Dec 27 '12 at 21:16

score 2 · Accepted Answer · answered Dec 27 '12 at 21:19

The logIn function from the Parse API requires string values for its username and password arguments. You are passing in HTML elements.

Change the call to this:

  Parse.User.logIn(document.loginForm.uname.value, document.loginForm.pword.value, 
  {
    success: function(user) 
    {
      window.location="/index.html";
    },
    error: function(user, error) 
    {
      alert('error '+error);
      // The login failed. Check error to see why.
    }
  });

And you should get further.

Updated Fiddle: http://jsfiddle.net/JYsZe/1/

Calling parse javascript function from HTML form event

1 Answers1