How do I Add Text to a form pull-CodePudding

So I'm trying to make an API Fetch from a Form Input (The Search bar of my site), I Want to add Text to whatever was inputted to the Text Field and then send it trough to be pulled.

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

Java Script

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.log(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.log(json);
} catch(event) {
    console.error(event)
    alert("there was an Error")
}

});

so what I Would like to do is as they submit it Text is added to the Front and then It goes trough the whole javascript Prosccess

CodePudding user response：

Concatenate the text with jsonObject.search, not jsonObject.

Object.fromEntries() returns a new object, there's no need to duplicate it with {...formDataSerialized}

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

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

  const formData = new FormData(SearchBoxMainNav);
  const jsonObject = Object.fromEntries(formData);
  jsonObject.search = 'fname '   jsonObject.search;

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

});