Meteor.JS when Page navigation on Button Click ,Page loads for a second and again previous page appears - meteor

Question

Code For LoginRegister.html
1.Main Page
2.All the templates are working fine.I think there is no issue regarding the html file
3.Problem is in the router.js file
<!--Home Template !-->
<template name="home">
{{> login}}
</template>
<!--Layout Template !-->
<template name="layout">
<header>
{{> topheader }}
</header>
{{> yield}}
</template>
<!--TopHeader Template !-->
<template name="topheader">
<h1>Welcome</h1>
</template>
<!--Login Template !-->
<template name="login">
<form class="form-horizontal">
<button type="submit" class="btn btn-default signin" id="signInBtn ">Sign in</button>
<button type="submit" class="btn btn-default signup" id="signUpBtn ">Sign Up</button>
</form>
</template>
<!--SignUP Template !-->
<template name="signup">
<h1>SIGNUP <small>Page</small></h1>
</template>
Router.js
This works correctly , When SignUp button is clicked , it flashes sigup template but again reloads home template with login page
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function()
{
this.route('home',{path: '/'});
this.route('signup',{path: '/signup'});
})
loginRegister.js
Java Script File containing events for Both Button Click
if (Meteor.isClient) {
Template.login.events({
'click .signin': function(evt,tmpl){
alert("Sign in button is clicked");
console.log("Registration Form submitted.");
},
'click .signup':function(evt,tmpl)
{
Router.go('signup', {name: '/signup'});
}
});
}
Please help I am stuck and I am new to Meteor so unable to figure it out , and search does not generated good result

Answer 1

You need to prevent your button from submitting, so try something like this in your signup event handler code:
'click .signup':function(evt,tmpl)
{
evt.preventDefault(); // add this to prevent the button from submitting
Router.go('signup', {name: '/signup'});
}