Problem: I am using the following code provided by StackOverflow members. I like the code, and I wish it worked, but it did not, as I will explain:
The Purpose: Take input from the Client-Side, modify it with JavaScript, then POST the modified variables to the Server-Side (Node.js/Express).
The Code (credit to kwh):
<body>
<script type="text/javascript">
function customSubmit() {
const name = document.getElementById('name').value + ' mock';
const city = document.getElementById('city').value + ' mock';
fetch('/posty', {
method: 'POST',
body: JSON.stringify({ name, city })
})
}
</script>
<form onsubmit="event.preventDefault(); customSubmit()">
<label for="name">Name: </label>
<input id="name" name="name" type="text">
<label for="city">City: </label>
<input id="city" name="city" type="text">
<button type="submit">submit</button>
</form>
</body>
I have node.js and express.js serverside, and I have not installed node-fetch. I use EJS as templating engine/file for HTML and JS for the Client-Side.
Client side code:
app.post('/posty', (req,res) => {
console.log(req.body)
})
which returns an empty object in the console (Linux terminal):
{}
Now if I replace the following line in the code:
<form onsubmit="event.preventDefault(); customSubmit()">
with
<form action="/posty" method ="POST">
I will get a non-empty object in the console:
{ name: 'John', city: 'Berlin' }
However, this is not the solution because I have to modify the person's name and the city before POSTing it to the Server-Side (Node.js).
Discussion:
I have not installed node-fetch for node.js. Even, If I installed it, I would have to import the module in a node.js server file that runs on the Server-Side, not on the Client-Side. I cannot see the point of installing node-fetch on node.js to use fetch() to POST in HTML/JS code running on a compatible browser on the Client-Side.
Maybe something is missing in the given codes above, either on the Server-Side or Client-Side, or both. I would appreciate it if someone could point that out. Also, I want to thank kwh, who provided the clean and compact code and helped organize my research to solve the problem.
Thanks for your responses. I find the solution with the help of two StackOverflow members and one of the other posts on StackOverflow forum:
I had to add the following line to fetch() block in the code that kwh suggested (Client-Side):
headers: new Headers({ "Content-Type": "application/json" })
Also, I added the following line to the code on the Server-Side as Ifaruki suggested:
app.use(express.json())
So one line of code was missing on the Server-Side and one on the Client-Side. I needed both.
Thanks again for your fast response and your help.