Как добавить текст в выпадающую форму

Итак, я пытаюсь сделать API-выборку из ввода формы (панель поиска моего сайта), я хочу добавить текст ко всему, что было введено в текстовое поле, а затем отправить его для извлечения.

<form id = "SearchBoxMainNav" style = "display: flex;">
    <input class = "nav-button" type = "submit" name = "search" value = "" >
    <input id = "SearchTerm" type = "search" class = "search" name = "search" value = "" placeholder = "I Draw...!" autocomplete = "off" />
</form>

Java-скрипт

const apiUrl = 'https://db.ygoprodeck.com/api/v7/cardinfo.php';

SearchBoxMainNav.addEventListener('submit', async (event) => {
event.preventDefault();

const formData = new FormData(SearchBoxMainNav);
const formDataSerialized = Object.fromEntries(formData);
const jsonObject = { ...formDataSerialized};
console.info(formDataSerialized, "formDataSerialized");

try {
    const response = await fetch(apiUrl, {
        method: 'POST',
        body: JSON.stringify("fname" + jsonObject),
        Headers: {
            'Contnent-Type': 'application/json'
        },
    });
    const json = await response.json();
    console.info(json);
} catch(event) {
    console.error(event)
    alert("there was an Error")
}

});

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