Запрос на выборку приводит к перезагрузке нежелательной страницы

У меня возникла проблема с запросом на выборку с моей клиентской стороны на сервер. Каким-то образом запрос на выборку вызывает перезагрузку страницы, чего я хочу избежать. Я искал несколько мест, чтобы понять это, но я должен обратиться к вам, ребята, за помощью.

Все транзакции данных между базой данных работают должным образом. Видимо ошибок в функционале нет. За исключением того факта, что я не хочу, чтобы страница перезагружалась при запуске запроса на выборку.

Обратите внимание, что я использую EJS в качестве механизма шаблонов и Bootstrap 4 в качестве внешней библиотеки.

Пожалуйста, взгляните на мой код ниже. Любые советы, чтобы избежать перезагрузки страницы, очень ценятся.

Интерфейсный HTML:

// detailjs.ejs

<div class = "row">
    <form>
        <button class = "btn btn-outline-primary" onclick = "UpdateArchiveStatus(this)" id = "btn-move-to-inbox"><i class = "fas fa-inbox"></i> Flytt til innboks</button>
        <button class = "btn btn-outline-primary" onclick = "UpdateArchiveStatus(this)" id = "btn-move-to-archive"><i class = "fas fa-archive"></i> Arkiver</button>
    </form>
</div>

<div class = "row">
    <input type = "hidden" name = "resolved-status" id = "resolved-status" value = "<%= message.status.isResolved %>">
    <input type = "hidden" name = "archive-status" id = "archive-status" value = "<%= message.status.isArchived %>">
</div>

<!-- Script include --!>
<script src = "/assets/js/messages/message-admin.js">

Внешний JavaScript

//message-admin.js

const UpdateArchiveStatus = btn => {
var messageId = $('#message-id').val();
var currentArchiveStatus = $('#archive-status').val();
var newArchiveStatus = null;

if (currentArchiveStatus == 'true') {
    newArchiveStatus = false;
 } else {
   newArchiveStatus = true;
 }
 StoreArchiveStatus(messageId, newArchiveStatus);
};

function StoreArchiveStatus (messageId, archiveStatus) {
    fetch(`/backoffice/api/messages/archive/${messageId}/${archiveStatus}`, 
    {
        method: 'GET',
    })
    .then(result => {
         return result.json();
    })
    .then(data => {
        $('#archive-status').val(data.status);
        CheckArchiveStatus();
        console.info(data.message);
    })
    .catch(err => {
        console.info(err);
     });
    };

function ToggleArchivedInterface () {
    var inboxButton   = $('#btn-move-to-inbox');
    var archiveButton = $('#btn-move-to-archive');

    inboxButton.removeClass('invisible');
    archiveButton.addClass('invisible');
};

function ToggleInboxInterface () {
    var inboxButton   = $('#btn-move-to-inbox');
    var archiveButton = $('#btn-move-to-archive');

    archiveButton.removeClass('invisible');
    inboxButton.addClass('invisible');
};

async function CheckArchiveStatus () {
    var archiveStatus = $('#archive-status').val();
    if (archiveStatus == 'true') {
        ToggleArchivedInterface();
    } else {
        ToggleInboxInterface();
    }
};

Задний маршрут:

//routes/backoffice.js

router.get('/api/messages/archive/:messageId/:archiveStatus', authenticate, backofficeController.apiUpdateMessageArchiveStatus);

Функция внутреннего контроллера:

//controllers/backoffice.js

exports.apiUpdateMessageResolvedStatus = (req, res, next) => {
    var messageId      = req.params.messageId;
    var resolvedStatus = req.params.resolvedStatus;

    VisitorMessage.findOneAndUpdate(
        { '_id' : messageId },
        { $set: {
            'status.isResolved': resolvedStatus
        }
    }).then((message) => {
        res.status(200).json({message: `Message status was changed`, status: resolvedStatus})
   }).catch((err) => {
       console.info('The following error occured during update:\n' + err);
       res.status(500).json({message: 'An error occured during update.'});
   })
};