Question

I am developing a simple Dojo application. I have a bit of a problem with my forms.
I have a form like this:

<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
      <label for="${id}_login">Login</label>
      <input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
      <label for="${id}_password">Password</label>
      <input name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
      <input type="submit" data-dojo-attach-point="loginButton" data-dojo-type="app.BusyButton" label="Login!" />
</form>

In the app I have:

 this.loginForm.onSubmit = function(e){

   // Do Ajax calls etc.
   // ..

   // Prevents actual submission
   return false;
 }

However, if anything goes wrong with the Javascript before that “return false”, the form is actually submitted, which results in an error (my node app will return Cannot POST /login as there is no POST action defined for that URL).

How can I make 1000% sure that the form doesn’t get submitted in any case? I know I could get rid of the tag altogether since I do everything with Ajax, but… then I wouldn’t get the nice data = that.loginForm.getValues(); for example. (I mean, it is a form after all)

(NOTE: I am NOT interested in non-javascript downgrading, really. The app is a 1-page ajax app, and there is no point in getting it to work if the user doesn’t have AJAX) )

Answer 1

preventDefault will stop the browser from performing the default action (ie: submitting).

this.loginForm.onSubmit = function(e){
  e.preventDefault();

  // Do Ajax calls etc.
  // ..
}

See here for more information.