POST form data using JavaScript's Fetch API

Подписаться 9 тыс.

Просмотров 42 тыс.

50% 1

👉 Source code: openjavascript.info/2022/04/2...
⚡ 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.net/b3dMek
Back-End Developer Professional Certificate: imp.i384100.net/gbYorg
iOS Developer Professional Certificate: imp.i384100.net/Jr7qj2
Meta Android Developer Professional Certificate: imp.i384100.net/oeYnGo
Meta Database Engineer Professional Certificate: imp.i384100.net/BX7KGB
Website: openjavascript.info
Twitter: / openjavascript

Опубликовано:

25 апр 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 38

@OpenJavaScript Год назад

Thanks for watching! 👉Source code and live examples: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/

@fede_r__ 10 месяцев назад

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

@tolorunseelizabeth8592 4 месяца назад

This helped me solve the problem I've been facing for a long time now, thank you very much.

@kodenigga2380 Год назад

Wow awesome I have been looking for something like this for a while now. Thanks alot

@OpenJavaScript Год назад

Glad I could help

@marie-elizeventer7080 Год назад

Great tutorial! Thanks! Keep going!

@OpenJavaScript Год назад

Thank you, planning to continue making videos!

@Surajverma003 8 месяцев назад

thanku very helpfull video 👍...

@Investigador9766 6 месяцев назад

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.

@viniciusm.m.7822 2 года назад

Excellent explanation, dude! Thanks! Forte abraço!

@OpenJavaScript 2 года назад

Thank you! Glad you found the video useful.

@jayvincent4248 Год назад

@@OpenJavaScript no, thank you. i love your channel. you got a new subscriber

@jamespaulchibole266 11 месяцев назад

Thank you, extremely important.

@OpenJavaScript 11 месяцев назад

Glad it was helpful!

@cool-coding_by_True-face 5 месяцев назад

Tres bon contenu 🤓🤓🤓

@paulochagas7575 2 года назад

really thanks!

@OpenJavaScript 2 года назад

Glad you found it useful!

@tiagoborges5108 Год назад

Thanh you for the video. I would like to know if you have any video talking about the formdata object and ajax?

@OpenJavaScript Год назад

I did make a video on making AJAX POST requests: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-I7LTqXRVcdg.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.

@tiagoborges5108 Год назад

@@OpenJavaScript thank you for the response.

@hemersonallan Год назад

Awesome !!!

@OpenJavaScript Год назад

Thanks!!

@j.nmwaniki8482 Год назад

any complete tutorial for posting to database a form data with image attachment??

@OpenJavaScript Год назад

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): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4sTmSlZDGow.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.

@romimaximus Год назад

I really like your videos, ...but your Mic volume its reallly low !!!

@OpenJavaScript Год назад

Thank you for the feedback! I'll look into it for the next videos.

@krishnajoshi9076 Год назад

I copy pasted the same code but its showing error at this point form.addEventListener('submit', function(e) {

@OpenJavaScript Год назад

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/

@nikolozdvali5767 Год назад

I have all input data saved in local storage and want to send it. Is there any way to send formdata from there

@OpenJavaScript Год назад

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

@nikolozdvali5767 Год назад

@@OpenJavaScript thank you very much

@OpenJavaScript Год назад

@@nikolozdvali5767 Welcome!

@tienskz.official Год назад

unexpected end of json input

@OpenJavaScript Год назад

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/

@j.nmwaniki8482 Год назад

post to database not log

@OpenJavaScript Год назад

I did just create a video on posting text and file data to a MySQL database that you might find useful: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xwfeik3bPpw.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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hekIHfOil50.html And for receiving form data in Node.js in the first place, this tutorial shows you how: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4sTmSlZDGow.html

@zachfenton608 2 года назад

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

@OpenJavaScript 2 года назад

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.