How can I submit a form without breaking dynamic content in PHP with JavaScript? [duplicate]

I have a webpage with a navbar menu. When a user clicks on a menu item, it dynamically loads the corresponding PHP file into the home dynamic content section using JavaScript, and the content updates without reloading the page.

One of the menu options displays a message form within the dynamic content area. However, when I submit the form, it redirects to the form.php file, causing the entire page to reload and breaking the dynamic content.

I want to submit the form data without causing a page reload, while keeping the dynamic content intact. I would like to display the success or failure message after submission, without reloading the page.

How can I achieve this using JavaScript to submit the form and display the result without breaking the dynamic content?

home.php

<li class="nav-item m-2"><a href="message.php" id="message" class="nav-link text-white px-3 py-2">message</a></li>

js

const massage = document.getElementById("message");

function loadPage(event, page) {
    if (event) event.preventDefault();

    fetch(page) // Fetch the PHP page
        .then(response => response.text())
        .then(data => {
            mainContent.innerHTML = data;
        })
        .catch(error => console.error("Error loading page:", error));
}

if (message) makeTimetable.addEventListener("click", (event) => loadPage(event, "../message.php"));