Not sure whether this is a Meteor problem, JavaScript problem, or otherwise. Clicking on a form button causes an undesired page reload.

Other info:

• Using Bootstrap package
• Using jQuery package
• Using Backbone package
• Page-reload problem still happens even when above packages are removed

• Commenting out the Posts.insert() line doesn't fix it either

  // from application.js
  // *this is the only event related code in the app (aside from any behind-the-scenes stuff abstracted away from us by meteor)

  Template.new_post.events = { 
  
      'click #submit' : function () {
  
        var text = $('#title').val();
        var cat = $('#category').val();
  
        // save our post with the value of the textbox
        Posts.insert({title : text, category : cat});
      }
  };
  

  // from index.html

  <template name="new_post">
    <form class="form-horizontal">
      <fieldset>
      <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="title">Title</label>
        <div class="controls">
          <input type="text" id="title" value="{{text}}" class="input-xlarge">
          <p class="help-block">Hint: Summarize your post in a few words</p>
        </div>
      </div>
      <div id="form-part-2">
        <div class="control-group">
          <label class="control-label" for="categories">Category</label>
          <div class="controls">
            <select class="input-xlarge" id="category">
              {{#each categories}}
                <option value="{{defaultLabel}}">{{defaultLabel}}</option>
              {{/each}}
            </select>
            <p class="help-block">Hint: Choose a category</p>
          </div>
        </div>
          <!-- Button -->
          <div class="control-group">
            <div class="controls">
              <button class="btn btn-success" id="submit">Done</button>
            </div>
          </div>
      </div><!-- end div form-part-2 -->
      </fieldset>
    </form>
  </template>
  

Not sure whether this is a Meteor problem, JavaScript problem, or otherwise. Clicking on a form button causes an undesired page reload.

Other info:

• Using Bootstrap package
• Using jQuery package
• Using Backbone package
• Page-reload problem still happens even when above packages are removed

• Commenting out the Posts.insert() line doesn't fix it either

  // from application.js
  // *this is the only event related code in the app (aside from any behind-the-scenes stuff abstracted away from us by meteor)

  Template.new_post.events = { 
  
      'click #submit' : function () {
  
        var text = $('#title').val();
        var cat = $('#category').val();
  
        // save our post with the value of the textbox
        Posts.insert({title : text, category : cat});
      }
  };
  

  // from index.html

  <template name="new_post">
    <form class="form-horizontal">
      <fieldset>
      <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="title">Title</label>
        <div class="controls">
          <input type="text" id="title" value="{{text}}" class="input-xlarge">
          <p class="help-block">Hint: Summarize your post in a few words</p>
        </div>
      </div>
      <div id="form-part-2">
        <div class="control-group">
          <label class="control-label" for="categories">Category</label>
          <div class="controls">
            <select class="input-xlarge" id="category">
              {{#each categories}}
                <option value="{{defaultLabel}}">{{defaultLabel}}</option>
              {{/each}}
            </select>
            <p class="help-block">Hint: Choose a category</p>
          </div>
        </div>
          <!-- Button -->
          <div class="control-group">
            <div class="controls">
              <button class="btn btn-success" id="submit">Done</button>
            </div>
          </div>
      </div><!-- end div form-part-2 -->
      </fieldset>
    </form>
  </template>
  

• javascript
• html
• http
• meteor

2 Answers 2

I think you have to return false at the end of your function for prevent submit.

Other than returning false you can also call preventDefault() on the event passed into your handler:

'click #submit' : function (template, event) {
  ...
  event.preventDefault();
}

This will only prevent the default action (i.e. submitting the form), but will not stop the event from propagating.