Why wont this code run if it's inside a function?

Question

Here's my code that does work:

firebase.initializeApp({});

var auth = firebase.auth();
const firestore = firebase.firestore();
const settings = {timestampsInSnapshots: true};
firestore.settings(settings);
var db = firebase.firestore();


$(function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // User is signed in.
            var uid = user.uid;

            // code in question
            db.collection('users').doc(uid).collection('people').doc().set({
                firstname: "John",
                lastname: "Doe"
            })
            .catch(function(error) {
                console.error("Error writing document: ", error);
            });    
        } else {
            // User is signed out.
        }
    });
});

However, I want to trigger the db.collection bit after a form on the page is submitted; something like this:

firebase.initializeApp({});

var auth = firebase.auth();
const firestore = firebase.firestore();
const settings = {timestampsInSnapshots: true};
firestore.settings(settings);
var db = firebase.firestore();

$(function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // User is signed in.
            var uid = user.uid;

            $('#myform').on('submit', function() {
                db.collection('users').doc(uid).collection('people').doc().set({
                    firstname: "John",
                    lastname: "Doe"
                })
                .catch(function(error) {
                    console.error("Error writing document: ", error);
                });    
            });
        } else {
            // User is signed out.
        }
    });
});

But for whatever reason that won't work.

Edit: Here's the entire #myform. This exists inside a bootstrap modal

        <form id="myform">
          <div class="form-row">
            <div class="col-md-12">
              <label for="firstname">First Name</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-user"></i></span>
                <input type="text" class="form-control" id="firstname" required>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12">
              <label for="lastname">Last Name</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-user"></i></span>
                <input type="text" class="form-control" id="lastname" required>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12">
              <label for="email">Email</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-email"></i></span>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div id="email-error"></div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12 mb-3">
              <label for="phone">Phone</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-phone"></i></span>
                <input type="tel" class="form-control" id="phone">
              </div>
              <div id="phone-error"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="btn-add-person">Add Person</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          </div>
        </form>

Answer 1

Your form submission is probably making the page reload. Try sticking onsubmit="return false;" in the attrs of your <form>.