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 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 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
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")
}
});