Sign up user using parse works with breakpoint, fails without

Question

I have a signup form with the fields Firstname, lastname, email, class of, and college major and I am trying to send the information from the form to a parse user object. When I set a breakpoint at "user.signup" the code steps through and I see the new user show up in my parse dashboard. However, if I remove the breakpoint and submit the form I get the error:

"Error: 100 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}"

the code for my javascript file is:

function SignUp() {
var user = new Parse.User();
var form = document.getElementById("signup-form")

var firstname = form.firstname.value;
var lastname = form.lastname.value;
var email = form.email.value;
var grad = form.grad.value;
var major = form.major.value;
var password = "6789";

user.set("firstname", firstname);
user.set("lastname", lastname);
user.set("email", email);
user.set("username", email);
user.set("grad", grad);
user.set("major", major);
    user.set("password", password);


user.signUp(null, {
  success: function(user) {
    // Hooray! Let them use the app now.
    alert("Thank you for signing up. We'll keep you updated!");
  },
  error: function(user, error) {
    // Show the error message somewhere and let the user try again.
    alert("Error: " + error.code + " " + error.message);
  }

});

return false;

};

In my html file I am calling this function at:

<form class="form-signup" role="form" id="signup-form" onsubmit="SignUp();">

Is there an issue with how I'm storing the values? I don't understand how something can work with a breakpoint but not without. Any help is really appreciated!

Answer 1

That's the typical problem with returning a value from within an asynchronous method … which is not possible.

Prevent the default submitting of the form, and then submit it explicitly within the call back function.

Answer 2

There is an another way also to solve this problem:

Instead of form in form class="form-signup" role="form" id="signup-form" onsubmit="SignUp()"

Write div ie div class="form-signup" role="form" id="signup-form" onsubmit="SignUp()"

Answer 3

As stated above, just add e.preventDefault(); at the start of your function and document.getElementById("your-form-id").submit(); or in this case just form.submit(); (because it was defined earlier in the script by var form ) into the success callback and it should work! Thought I would add a bit of clarity to reinforce CBroe's answer as it wasn't specified what the form.submit function looked like exactly.