I am trying to post data to my api via fetch. The post is working and my api is receiving it, but the data is not passing and everything is returned as null. What am i missing and is there anything i can improve with my current way of trying to do it?
HTML:
<form id="reportForm">
<input class="name" id="name" type="text">
<input class="phone" id="phone" type="tel">
<input class="email" id="email" type="email">
</form>
Javascript:
document.getElementById('reportForm').addEventListener('submit', postData);
function postData(event){
event.preventDefault();
let name = document.getElementById('name').value;
let phone = document.getElementById('phone').value;
let email = document.getElementById('email').value;
let reqBody = {
name: name,
phone: phone,
email: email
};
console.log("working");
fetch('http://localhost:8888/api/report', {
method: "POST",
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: JSON.stringify(reqBody)
}).then((res) => res.json())
.then((data) => console.log(data))
.catch((err)=>console.log(err))
}
API after posting data.
"data": [
{
"report_id": 1,
"user_id": null,
"name": "null",
"phone": "null",
"email": "null"
}
]