Search code examples
javascriptmeteoriron-router

Iron:router working Weird - sends me to template then goes back


I am having a problem with Router.go() function. i have a form and when it is submitted it is suppose to route me to quiz page. It currently does this except it immediately takes me back to the home template where the form was. I took a couple months away from Meteor so i wouldn't doubt that i am having a brain fart. Any help would be greatly appreciated, thanks.

All that is under the quiz page is the template with a name of quiz and a h1 tag inside of it stating its the quiz page. i can see this page for a second before it reverts me back to the home page.

Here is my home page js file:

if (Meteor.isClient) {

   Template.home.events({
       "click .btn-success": function(event){
           var lead_name = $('#name').val();
           var lead_email = $('#email').val();
           leads.insert({name: lead_name, email: lead_email});
           Router.go('quiz');
       }
   });

    Template.home.helpers({
       leads: function(){
           return leads.find();
       }
    });
}

Below is the home.html file:

<template name="home">
<div id="home" class="container-fluid">
    <div class="row col-md-4 col-md-offset-4">
        <h1>Omni Homogenizer Quiz</h1>
        <h2>How Well Do You Know Homogenizing?</h2>
        <form>
            <div class="form-group">
                <label for="name">Your Name:</label>
                <input type="text" name="name" placeholder="name" class="form-control" id="name">
            </div>
            <div class="form-group">
                <label for="email">Your Email:</label>
                <input type="text" name="email" placeholder="email" class="form-control" id="email">
            </div>
            <button class="btn btn-large btn-success">Play Now to Enter To Win an IPad Mini</button>
        </form>
    </div>
</div>

Here is my router.js file:

Router.configure({
    layoutTemplate: 'layout'
 });

Router.map(function() {

   this.route('home', {
      path: '/',
      template: 'home',
   });

   this.route('quiz');

});

Solution

  • Try adding event.preventDefault in your click. The button click is triggering a form submission.

    Template.home.events({
        "click .btn-success": function(event){
            event.preventDefault();
            var lead_name = $('#name').val();
            var lead_email = $('#email').val();
            leads.insert({name: lead_name, email: lead_email});
            Router.go('quiz');
        }
    });