Prevent page reload on form Button click in meteor?

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> ```