unable to send post request in JavaScript to an API

Question

below is the javascript used for the project

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  document.querySelector('#compose').addEventListener('click', compose_email);

  // By default, load the inbox
  load_mailbox('inbox');

  // document.querySelector('#compose-form').addEventListener('submit', function(event){
  //   event.preventDefault();
  //   send_email();
  // })
});

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 = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

fetch('/emails/inbox')
  .then(response => response.json())
  .then(emails => {
    // Print emails
    console.log(emails);

    // ... do something else with emails ...
    
})};

// const recipientsx = document.querySelector("compose-recipients").value
// const subjectx = document.querySelector("compose-subject").value
// const bodyx = document.querySelector("compose-body").value

// document.getElementById("submit").addEventListener('click', (e) => send_email());
let send_email = () => {

  // event.preventDefault(); // prevent default form submission 

  let recipientsx = document.getElementById("compose-recipients").value
  let subjectx = document.getElementById("compose-subject").value
  let bodyx = document.getElementById("compose-body").value

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
        recipients: recipientsx,
        subject: subjectx,
        body: bodyx
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
};

// const submitBtn = document.getElementById("send");
// submitBtn.addEventListener("click", function(){
//   send_email();
// })

let submit = document.getElementById("send");
if (submit) {
  document.getElementById("send").addEventListener("click", send_email);
};

// window.onload=function(){
//   let submit = document.getElementById("send");
//   document.getElementById("send").addEventListener("click", send_email);
// }

// submit.addEventListener("click", send_email);

// document.getElementById("send").addEventListener('click', (e) => send_email());

// document.querySelector('#btn btn-primary').addEventListener('click', send_email)

// document.getElementById("compose-form").submit(send_email);

below is the html for the project

{% extends "mail/layout.html" %}
{% load static %}

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>

    <div id="emails-view">

    </div>

    <div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form">
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input id="send" type="submit" class="btn btn-primary"/>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

ive included the commented out code to show some of the different attempts ive made

for the results, whenever I hit the submit it reloads the page to inbox but neither on the browser console nor vscode terminal does it show any post requests going through.