One important detail that you didn't mention is that each imput has to have a name attribute (with a value) to be included in the formData element, otherwise it skips it
I do not have a tutorial on posting to a database but I do have one on handling the receiving of form data with a file attachment on the backend with a Node.js server (from where you would then securely post to a database): ua-cam.com/video/4sTmSlZDGow/v-deo.html I steered away from the actual database call because there are so many different options, but I am going to do a small series on interacting with a MySQL database via Node.js/JavaScript soon.
thanks. i was getting frustated with the content type, when i fetch the FormData to a servlet it came out empty, just adding URLSearshParam made it work.
I did make a video on making AJAX POST requests: ua-cam.com/video/I7LTqXRVcdg/v-deo.html&ab_channel=OpenJavaScript I don't use the formData object in it, but you would prepare and payload using fromData in the same way as in this video. And then you'd insert it at the end of the request with AJAX. E.g.: req.send(payload) Using the formData object will automatically detect the payload content and set request headers for you, but you don't have to use it.
I did write a related blog for this tutorial with code as a live working example, I think copying/studying that should help you out: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
Yes, data is stored in LS in key-value format. To get in a regular object, you can use: const obj = Object.entries(localStorage) to get the From there, you could use a for...in loop to push each bit of data from the object into a FormData object: const fd = new FormData(); for (key in obj) { fd.append(key, obj[key]); } console.log(...fd); // Prints its contents
Hard to diagnose without running your code myself other than there's something going wrong when you are reading JSON. Most likely when you are parsing the response from the server from JS object to JSON using res.json(), but impossible for me to say with certainty. But you can check out this blog post that contains a working version of the code with live example (just tested and is still working) and compare it to your code: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
I did just create a video on posting text and file data to a MySQL database that you might find useful: ua-cam.com/video/xwfeik3bPpw/v-deo.html It's in Node.js so you'll want to make sure that's installed on your system before following this tutorial, here's a tutorial on that in case you haven't already: ua-cam.com/video/hekIHfOil50/v-deo.html And for receiving form data in Node.js in the first place, this tutorial shows you how: ua-cam.com/video/4sTmSlZDGow/v-deo.html
Great code but i get the error:Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at fetch_api.js:5:6 (anonymous) @ fetch_api.js:5
Hi Zach, based on the error, perhaps the form hasn't been selected or selected correctly? Here is some source code that you can copy: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/ If you are still having an issue, let me know.
Thanks for watching!
👉Source code and live examples: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
One important detail that you didn't mention is that each imput has to have a name attribute (with a value) to be included in the formData element, otherwise it skips it
This helped me solve the problem I've been facing for a long time now, thank you very much.
Excellent explanation, dude!
Thanks!
Forte abraço!
Thank you! Glad you found the video useful.
@@OpenJavaScript no, thank you. i love your channel. you got a new subscriber
Thank you, extremely important.
Glad it was helpful!
any complete tutorial for posting to database a form data with image attachment??
I do not have a tutorial on posting to a database but I do have one on handling the receiving of form data with a file attachment on the backend with a Node.js server (from where you would then securely post to a database):
ua-cam.com/video/4sTmSlZDGow/v-deo.html
I steered away from the actual database call because there are so many different options, but I am going to do a small series on interacting with a MySQL database via Node.js/JavaScript soon.
thanks. i was getting frustated with the content type, when i fetch the FormData to a servlet it came out empty, just adding URLSearshParam made it work.
Tres bon contenu 🤓🤓🤓
Thanh you for the video. I would like to know if you have any video talking about the formdata object and ajax?
I did make a video on making AJAX POST requests: ua-cam.com/video/I7LTqXRVcdg/v-deo.html&ab_channel=OpenJavaScript
I don't use the formData object in it, but you would prepare and payload using fromData in the same way as in this video. And then you'd insert it at the end of the request with AJAX. E.g.:
req.send(payload)
Using the formData object will automatically detect the payload content and set request headers for you, but you don't have to use it.
@@OpenJavaScript thank you for the response.
thanku very helpfull video 👍...
Great tutorial! Thanks! Keep going!
Thank you, planning to continue making videos!
I copy pasted the same code but its showing error at this point
form.addEventListener('submit', function(e) {
I did write a related blog for this tutorial with code as a live working example, I think copying/studying that should help you out: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
I really like your videos, ...but your Mic volume its reallly low !!!
Thank you for the feedback!
I'll look into it for the next videos.
I have all input data saved in local storage and want to send it. Is there any way to send formdata from there
Yes, data is stored in LS in key-value format. To get in a regular object, you can use:
const obj = Object.entries(localStorage) to get the
From there, you could use a for...in loop to push each bit of data from the object into a FormData object:
const fd = new FormData();
for (key in obj) {
fd.append(key, obj[key]);
}
console.log(...fd); // Prints its contents
@@OpenJavaScript thank you very much
@@nikolozdvali5767 Welcome!
unexpected end of json input
Hard to diagnose without running your code myself other than there's something going wrong when you are reading JSON. Most likely when you are parsing the response from the server from JS object to JSON using res.json(), but impossible for me to say with certainty.
But you can check out this blog post that contains a working version of the code with live example (just tested and is still working) and compare it to your code:
openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
really thanks!
Glad you found it useful!
post to database not log
I did just create a video on posting text and file data to a MySQL database that you might find useful: ua-cam.com/video/xwfeik3bPpw/v-deo.html
It's in Node.js so you'll want to make sure that's installed on your system before following this tutorial, here's a tutorial on that in case you haven't already: ua-cam.com/video/hekIHfOil50/v-deo.html
And for receiving form data in Node.js in the first place, this tutorial shows you how: ua-cam.com/video/4sTmSlZDGow/v-deo.html
Awesome !!!
Thanks!!
Wow awesome I have been looking for something like this for a while now. Thanks alot
Glad I could help
Great code but i get the error:Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at fetch_api.js:5:6
(anonymous) @ fetch_api.js:5
Hi Zach, based on the error, perhaps the form hasn't been selected or selected correctly?
Here is some source code that you can copy:
openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
If you are still having an issue, let me know.