I'm busy with David Turnbull's - Your first Meteor Application. Everything works up to the point where I try and add a new player to the list via a form. My problem is that preventDefault is not preventing the form from trying to submit and reloading the page. return false doesn't work either.

Any ideas why this will be happening?

Thanks

PlayersList = new Mongo.Collection('players');

if (Meteor.isClient) {

  //Helpers
  Template.leaderboard.helpers({
    'player': function() {
      return PlayersList.find({}, {sort: {score: -1, name: 1}});
    },
    'playerCount': function() {
      return PlayersList.find().count();
    },
    'selectedClass': function() {
      var playerId = this._id;
      var selectedPlayer = Session.get('selectedPlayer');
      if(playerId == selectedPlayer) {
        return 'selected'
      }
    },
    'showSelectedPlayer': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      return PlayersList.findOne(selectedPlayer);
    }
  });

  //Events
  Template.leaderboard.events({
    'click .player': function() {
      var playerId = this._id;
      Session.set('selectedPlayer', playerId);
    },
    'click .increment': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var increaseBy = document.getElementById('increase-by').value;
      var isNumber = /^\d+$/.test(increaseBy);
      if(increaseBy != '' && isNumber) {
        PlayersList.update(selectedPlayer, {$inc: {score: +increaseBy}});
      }
    },
    'click .decrement': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var decreaseBy = document.getElementById('decrease-by').value;
      PlayersList.update(selectedPlayer, {$inc: {score: -decreaseBy}});
    },
    'submit #new-player': function(event) {
      event.preventDefault();
      var playerNameVar = event.target.playerName.value;

      if(playerNameVar != '') {
        PlayersList.insert({
          name: playerNameVar,
          score:0
        });
      }
    }  
  });
}

Template

<template name="addPlayerForm">

<div id="add-player" class="reveal-modal" data-reveal>
    <a class="close-reveal-modal">&#215;</a>
    <h2>Add a player</h2>
    <p class="lead">Add another player to the leaderboard</p>

    <div class="row">
        <div class="small-8 column small-centered">
            <form id="new-player">
                <div class="row collapse">
                    <div class="small-8 column">
                        <input type="text" placeholder="Player name" name="playerName">
                    </div>
                    <div class="small-4 column">
                        <input type="submit" class="button postfix" value="add player">
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

</template>

I'm busy with David Turnbull's - Your first Meteor Application. Everything works up to the point where I try and add a new player to the list via a form. My problem is that preventDefault is not preventing the form from trying to submit and reloading the page. return false doesn't work either.

Any ideas why this will be happening?

Thanks

PlayersList = new Mongo.Collection('players');

if (Meteor.isClient) {

  //Helpers
  Template.leaderboard.helpers({
    'player': function() {
      return PlayersList.find({}, {sort: {score: -1, name: 1}});
    },
    'playerCount': function() {
      return PlayersList.find().count();
    },
    'selectedClass': function() {
      var playerId = this._id;
      var selectedPlayer = Session.get('selectedPlayer');
      if(playerId == selectedPlayer) {
        return 'selected'
      }
    },
    'showSelectedPlayer': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      return PlayersList.findOne(selectedPlayer);
    }
  });

  //Events
  Template.leaderboard.events({
    'click .player': function() {
      var playerId = this._id;
      Session.set('selectedPlayer', playerId);
    },
    'click .increment': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var increaseBy = document.getElementById('increase-by').value;
      var isNumber = /^\d+$/.test(increaseBy);
      if(increaseBy != '' && isNumber) {
        PlayersList.update(selectedPlayer, {$inc: {score: +increaseBy}});
      }
    },
    'click .decrement': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var decreaseBy = document.getElementById('decrease-by').value;
      PlayersList.update(selectedPlayer, {$inc: {score: -decreaseBy}});
    },
    'submit #new-player': function(event) {
      event.preventDefault();
      var playerNameVar = event.target.playerName.value;

      if(playerNameVar != '') {
        PlayersList.insert({
          name: playerNameVar,
          score:0
        });
      }
    }  
  });
}

Template

<template name="addPlayerForm">

<div id="add-player" class="reveal-modal" data-reveal>
    <a class="close-reveal-modal">&#215;</a>
    <h2>Add a player</h2>
    <p class="lead">Add another player to the leaderboard</p>

    <div class="row">
        <div class="small-8 column small-centered">
            <form id="new-player">
                <div class="row collapse">
                    <div class="small-8 column">
                        <input type="text" placeholder="Player name" name="playerName">
                    </div>
                    <div class="small-4 column">
                        <input type="submit" class="button postfix" value="add player">
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

</template>

• javascript
• meteor

• Can you include your template as well? – Scott Commented Nov 15, 2014 at 14:33
• I added the template and updated according to you answer but there is no change. Form still submits and refreshes the page. – wind_kind Commented Nov 16, 2014 at 11:54
• Just updated my answer – Scott Commented Nov 16, 2014 at 12:17

2 Answers 2

I've never read the book, and I don't know what your template looks like, but the problem is likely due to a selector issue.

Maybe try assigning an id to your form and mapping the submit event to that id:

// html file
<Template name="leaderboard">
  <form id="new-player">
    <input type="text" name="playerName">
    <input type="submit" value="Submit">
  </form>
</Template>

// js file
Template.leaderboard.events({
  'submit #new-player': function(event) {
    event.preventDefault();
    ...
  }
});

Edit

Maybe try changing Template.leaderboard.events to Template.addPlayerForm.events.

Ok, I made the same mistake as the poster and I am putting the correct code here:

In html file:

<template name="addPlayerForm">
  <form>
    <input type="text" name="playerName">
    <input type="submit" value="Add Player">
  </form>
</template>

In js file:

Template.addPlayerForm.events({
    'submit form': function(event){
        event.preventDefault();
        console.log("Form submitted");
        console.log(event.type);
    }
});