title: submit event does not perform desired output in JavaScript
body: <p>I am designing a front-end for an email application that makes API calls to send and receive emails. First, I'm trying to successfully send an email by making a POST request to the <code>/emails</code> route passing in the <strong>recipients</strong>, <strong>subject</strong>, and <strong>body</strong> which I grab from the form that the user submits.
  After the user submits the form, I want to load the <code>sent</code> mailbox view. My page loads the sent view but soon the <code>compose view</code> appears, and I can't seem to figure out why.</p>
  <p><strong>inbox.html</strong></p>
  <pre><code>{% extends &quot;mail/layout.html&quot; %}
  {% load static %}
  
  {% block body %}
      &lt;h2&gt;{{ request.user.email }}&lt;/h2&gt;
  
      &lt;button class=&quot;btn btn-sm btn-outline-primary&quot; id=&quot;inbox&quot;&gt;Inbox&lt;/button&gt;
      &lt;button class=&quot;btn btn-sm btn-outline-primary&quot; id=&quot;compose&quot;&gt;Compose&lt;/button&gt;
      &lt;button class=&quot;btn btn-sm btn-outline-primary&quot; id=&quot;sent&quot;&gt;Sent&lt;/button&gt;
      &lt;button class=&quot;btn btn-sm btn-outline-primary&quot; id=&quot;archived&quot;&gt;Archived&lt;/button&gt;
      &lt;a class=&quot;btn btn-sm btn-outline-primary&quot; href=&quot;{% url 'logout' %}&quot;&gt;Log Out&lt;/a&gt;
      &lt;hr&gt;
  
      &lt;div id=&quot;emails-view&quot;&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;compose-view&quot;&gt;
          &lt;h3&gt;New Email&lt;/h3&gt;
          &lt;form id=&quot;compose-form&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  From: &lt;input disabled class=&quot;form-control&quot; value=&quot;{{ request.user.email }}&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  To: &lt;input id=&quot;compose-recipients&quot; class=&quot;form-control&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input class=&quot;form-control&quot; id=&quot;compose-subject&quot; placeholder=&quot;Subject&quot;&gt;
              &lt;/div&gt;
              &lt;textarea class=&quot;form-control&quot; id=&quot;compose-body&quot; placeholder=&quot;Body&quot;&gt;&lt;/textarea&gt;
              &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary&quot;/&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  {% endblock %}
  
  {% block script %}
      &lt;script src=&quot;{% static 'mail/inbox.js' %}&quot;&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>
  <p><strong>inbox.js</strong></p>
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
  
    var form = document.querySelector('#compose-form');
  
    form.addEventListener('submit', function(e){
  
      // e.preventDefault();
  
      let sent = false;
  
      const recipients = document.querySelector('#compose-recipients').value;
      const subject = document.querySelector('#compose-subject').value;
      const body = document.querySelector('#compose-body').value;
  
      fetch('/emails', {
        method: 'POST',
        body: JSON.stringify({
            recipients: recipients,
            subject: subject,
            body: body
        })
      })
      .then(response =&gt; response.json())
      .then(result =&gt; {
          // Print result
          console.log(result);
          sent = true;
      });
  
      load_mailbox('sent');
  
      return false;
  
    })
    
    
    // Use buttons to toggle between views
    document.querySelector('#inbox').addEventListener('click', () =&gt; load_mailbox('inbox'));
    document.querySelector('#sent').addEventListener('click', () =&gt; load_mailbox('sent'));
    document.querySelector('#archived').addEventListener('click', () =&gt; load_mailbox('archive'));
    document.querySelector('#compose').addEventListener('click', compose_email);
  
    // By default, load the inbox
    if (sent === false) {
      load_mailbox('inbox');
    }
    // load_mailbox('inbox');
  });
  
  function compose_email() {
  
    // Show compose view and hide other views
    document.querySelector('#emails-view').style.display = 'none';
    document.querySelector('#compose-view').style.display = 'block';
  
    // Clear out composition fields
    document.querySelector('#compose-recipients').value = '';
    document.querySelector('#compose-subject').value = '';
    document.querySelector('#compose-body').value = '';
  }
  
  function load_mailbox(mailbox) {
    
    // Show the mailbox and hide other views
    document.querySelector('#emails-view').style.display = 'block';
    document.querySelector('#compose-view').style.display = 'none';
  
    // Show the mailbox name
    document.querySelector('#emails-view').innerHTML = `&lt;h3&gt;${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}&lt;/h3&gt;`;
  }
  </code></pre>