POST form data using JavaScript's Fetch API
Вставка
- Опубліковано 8 вер 2024
- 👉 Source code: openjavascript...
⚡ Looking for high-performance, affordable web hosting for your website or app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
Form data can be sent via JavaScript's Fetch API by converting the form element into a FormData object or a URL-encoded string and specifying this as the body of the fetch request.
#javascript #fetch #fetchapi #httprequest #formdata #api
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript
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.
Thank you, extremely important.
Glad it was helpful!
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
Wow awesome I have been looking for something like this for a while now. Thanks alot
Glad I could help
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 🤓🤓🤓
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.
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.
Great tutorial! Thanks! Keep going!
Thank you, planning to continue making videos!
thanku very helpfull video 👍...
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.
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/
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/
Awesome !!!
Thanks!!
really thanks!
Glad you found it useful!
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!
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
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.