How to trigger an event on a form contained in a modal that updates a user's email address

Question

I am working with an old code-base that has a tech stack of Backbone JS, jQuery, and Bootstrap. I have a bootstrap modal that I am using to update an email address on my server. I can't figure out how to trigger my Backbone JS event the way that I want.

<div class="modal fade" id="modalUpdateEmail" role="dialog" aria-labelledby="update-email-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="updateEmailForm">
        <div class="modal-body">
          <label for="email">Please enter the email address you want to use:</label><br />
          <input type="email" id="updateEmailInput" name="email" class="email-sm" title="eg.                   [email protected]">
        </div>
        <div class="modal-footer">
          <div class="margin-bottom50">
            <button id="btn-save-email" type="submit" class="btn btn-primary" data-dismiss="modal">Save</button>
            <button id="btn-close-preferences" type="button" class="btn btn-default pull-right"
              data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

"submit #updateEmailInput": function (e) {
    var email = e.currentTarget[0].value;
    var dispute_name = this.model.get("dispute_name");
    this.model.set("party_contact_email", this.email);
    let self = this;
    this.model
        .updatePartyContactEmail(dispute_name, email)
        .done(function (response) {
        self.$("#success-on-party-email-updated").modal("show");
        })
        .fail(function (err) {
            self.$("#error-on-party-contact-updated").modal("show");
        });
},

If I only have the email input in the HTML and a submit event on the form id="updateEmailForm, it will work. The success modal shows up and the email address is updated.

I need to add a save button that can be used in addition to (or instead of) using the enter key after typing an email. With what I currently have (as shown above), the update email modal closes, but the success modal does not trigger and the email isn't saved.

Answer 1

If you register the event for submit form instead of submit #updateEmailInput, the handler will be invoked both when you click the submit button and when you press enter while typing in the email input.

Since that handler won't get a reference to the email input in its event argument, you can read the new email value like this instead:

this.$('#updateEmailInput').val()