I am having some issues with a Post request. I am trying to post a js object, the http request works but it doesnt seems to get the values form the input fields, it posts instead an empty object! I have tried everything cant seems to find the error!
app.js
function addPoem() {
event.preventDefault();
let title = document.getElementById("titleInput").value
let author = document.getElementById("authorInput").value
let text = document.getElementById("textInput").value
let newPoem = {
id: 8,
title: title,
author: author,
text: text
}
makeRequest("/poems/", "post", newPoem)
}
async function makeRequest(url, reqMethod, body) {
const response = await fetch(url, {
//headers = { "Content-Type": "application/json" },
method: reqMethod,
body:JSON.stringify(body)
})
console.log(response)
const data = await response.json()
console.log(data)
}
index.html
<form method="post" action="/poems">
<h1>Send us your poem!</h1>
<input type="text" requirede name="title" id="titleInput"> <br>
<input type="text" required name="author" id="authorInput"> <br>
<br> <input type="text" required name="text" id="textInput" style="width:500px;height:500px">
<br>
<button type="submit" onclick="addPoem()">Send</button>
</form>
server.js
// Post a poem
app.post('/poems', (req, res, next) => {
allPoems.push(req.body)
res.json({ status: "A new poem has been posted!"})
})
