Java Script Console issue in Meteor

Question

I get a problem with JavaScript Console. I did a login form example. In this example when ever clicks a login button it goes to corresponding events in the JS. Here the problem is i write some console logs in JS, In this console logs are shows when ever clicks login button then immediately hiding means just come and with in fraction of seconds its hiding.So I didn't have any idea so please see the below code and suggest me.

HTML Code :

<template name="login">
  <form id="login-form" action="action">
         <div>
              <h2> Login<h2>
              <input type="text" id="email" placeholder="Email" /><br>
              <input type="password" id="pwd" placeholder="Password" /><br>
              <input type="submit" value="Login" id="login" />
          </div>
    </form>
</template>

JS Code :

 Template.login.events
  ({
    'submit #login-form' : function ()
    {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });

score 1 · Answer 1 · answered Jan 30 '14 at 08:37

By default, when you submit a form it makes another HTTP request which will reload the page and halt whatever meteor was doing. To prevent this, you can do something like:

Template.login.events({
  submit: function() {
    console.log('SUBMIT!');
    return false;
  }
});

Returning false from a handler is the same as calling both stopImmediatePropagation and preventDefault on the event.

Note that events will always be isolated to the template so you can just use submit instead of submit #id unless you have more that one form in the template.

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Please see this question. You can solve the issue by using e.preventDefault() in your event handler:

if (Meteor.isClient) {
 Template.login.events
  ({
    'submit #login-form' : function (e, t)
    {
      e.preventDefault();
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

Or by using <input type='button' value="Login" id="login" /> and registering the event handler so that it matches click events (not submit).

Java Script Console issue in Meteor

2 Answers2