Why does responding to an HTML Button click submit my page (or at least take me back to my prior Template)?

I’ve got this template in my Meteor app to insert a Document in a MongoDB Collection:

    
      

Add a Job/Location

Log In Designation for Job/Location Save Job/Location

Here is the client-side code:

    Template.addJobLoc.events({
          'click #btnSaveJobLoc': function(event, template) {
    
            var username = Session.get("username");
            var jobloc = template.find('#textJobLoc').value;
            Meteor.call('insertJobLocation', username, jobloc, function(err) {
                  if (err) {
                    Session.set("lastErrMsg", err.message);
                  } else {
                    alert(jobloc + ' inserted');
                    $('#textJobLoc').val("");
                    $('#textJobLoc').focus();
                  } // else
            }); // Meteor call
          } // click event
    });

…and the server-side code:

    Meteor.methods({
        'insertJobLocation': function(username, jobLoc) {
            JobLocations.insert({
                jl_username: username,
                jl_jobloc: jobLoc,
                jl_created_by: this.userId
            });
        },
        . . .

The DB code is working - the Document is inserted into the Collection - but then my “addJobLoc” Template disappears, and the default/starting point Template reappears. I don’t want that - I want to be able to enter multiple Job Locations. That’s why I switched from using the form tag and an input type=“submit” element - so that the form wouldn’t submit and invalidate the page.

So why is it doing that, and how can I prevent it?

I really don’t see anything that would cause this. If you can create a minimal reproduction that can be cloned, I’d be more than willing to take a look.

As a side note, when giving code examples you can add three backticks followed by the grammar name on a line then put the code on consecutive new lines and then on a final line finish it with three more backticks. This will properly format and highlight your code so it’s easier to read.

```javascript
    //add your javascript code here
```

```html
    <!-- and your html here -->
```

Thanks for the tip on the code highlighting - I just used it on my latest question.

However, I wish you wouldn’t call the “grave accent” a “backtick” - it gives me the fantods! Last summer I took a short hike with my brother in Calaveras County (where one of the big wildfires are now raging) and had 17 ticks on my back (and elsewhere) by the end of the jaunt. Those little rascals are the ISIS of the insect Kingdom.

1 Like

Some people also call it ‘backquote’, but I think the ship has sailed on the naming there.