Sending Form Data (POST) with the Fetch API in JavaScript

In this video we look at sending form data (POST) with the Fetch API. Fetch makes it super easy to do this and is great for making asynchronous, mobile friendly web applications.

The example involves logging in to a site asynchronously. Both types of data are covered: x-www-form-urlencoded and multipart/form-data.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #webdev

[dcode-software]

*RELATED VIDEO: UPLOAD FILES WITH THE FETCH API*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[webdev]

people like you are making the world a better place.

[karentutor]

Thx for this I honestly spent a long time looking for a simple way to submit form data using the fetch api - this fits the bill. Thanks again for the great tutorial!

[hourshower]

You helped me out big time. You're the only chap on here making sense with this matter. Thanks.

[Levelord]

Fucking awesome dude!
I finally understand that FormData is an analog for jquery's serialize() form and pushing it into array, which we then send with data key.

[davidmajdandzic]

Thank you so much! Your video just ended hours of head scratching and screaming swear words! 🥳

[akshitkhajuria]

Great tut. But you should never send sensitive info like passwords as URL encoded strings. Use POST with https instead. POST method doesn't encode query params in the url.

[hoo_chuchu_]

고맙다!! 당신 덕분에 문제를 해결했다. 중요한내용을 확실히 집어주는 당신은 정말 최고! 나의 스승이 되어줘!
Thank you !! You solved the problem. You are really nice guy! Be my teacher!

[Unerty]

If you get an error
"Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'", then replace
const formData = new FormData(this);
with
const formData = new

For example, i if you have
const myForm =
then put
const formData = new FormData(myForm);

[inteltone]

Thanks a lot for this video tutorial! It is very useful.

[Lord-vs]

Please help me, I keep getting an *http 405 (Method not Allowed)* error when I run my project. What do I do? Do I have to change something in *Xampp*?

[coredatallc]

Very nice video. Now extend this to include MySQL query response using PDO and you will have a gem.

[stepdate]

Thank you, this was extremely helpful!

[bjornleonhenry]

your videos are explosive 💥 coding dynamite

[tamas-pamas]

When would you use urlencoded form data and multipart form data? what is the point to parse into URLSearchParams object? To me it is just an extra step

[randomvideoguy]

I love you for posting this ty so much

[sir.charless.]

you didn't show the php file, how do use the the data sended?

[cjmarchi]

simple and 100% working solution. Tks :)

[nidhishettigar]

I am getting error - uncaught typeerror cannot read properties of null(reading addeventlisterner) . This is for variable myform. How can i solve this error please help!!!

[IBITZEE]

a teaser...
strictly at client side (no control over the server...)
I need to pass the form data from one page to the next called page...
but with <form action="nextpage.html" method=POST>
(yeah, , , with post)

I know I can do it via GET/parms-in-url
via H5/localStorage or via H5/sessionStorage...

but??? is there anyway to do it with POST/action???
the form information/fields, , , of course are in the HTTP headers...