I am currently building a single page web app and wanted that js handle the form submission and so that route remain the same. But when i click the submit button route changes,
JS Code:
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');});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>`;}function send_mail(event){ const recipients = document.querySelector('#compose-recipients').value; const subject = document.querySelector('#compose-subject').value; const body = document.querySelector('#compose-body').value; //send the email as post to the server fetch('/emails', { method: 'POST', body: JSON.stringify({ recipients: recipients, subject: subject, body: body }) }) .then(response => response.json()) .then(result => { console.log(result); //loading the sent box after sending the email load_mailbox('sent'); }) return false;}document.querySelector('#compose-form').onsubmit = send_mail;HTML code:
{% 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 type="submit" class="btn btn-primary"/></form></div>{% endblock %}{% block script %}<script src="{% static 'mail/inbox.js' %}"></script>{% endblock %}What i tried is putting the last line of code, in the event listener of DOMContentLoaded and this works fine. what is causing this problem why route is changing ?