No video
Sending Form Data (POST) with the Fetch API in JavaScript
Рет қаралды 202,832
Күн бұрын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:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
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
@webdev4786 3 жыл бұрын
people like you are making the world a better place.
@dcode-software Жыл бұрын
*RELATED VIDEO: UPLOAD FILES WITH THE FETCH API* kzfaq.info/get/bejne/mcuZZaaZm56XoWQ.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
@1000hourshower Жыл бұрын
You helped me out big time. You're the only chap on here making sense with this matter. Thanks.
@karentutor5470 4 жыл бұрын
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!
@akshitkhajuria4362 4 жыл бұрын
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.
@Levelord92 5 жыл бұрын
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.
@dcode-software 5 жыл бұрын
Yeah that's it mate!!
@hoo_chuchu_0901 4 жыл бұрын
고맙다!! 당신 덕분에 문제를 해결했다. 중요한내용을 확실히 집어주는 당신은 정말 최고! 나의 스승이 되어줘! Thank you !! You solved the problem. You are really nice guy! Be my teacher!
@Unerty 4 жыл бұрын
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 FormData(HERE_PUT_YOUR_FORM_OBJECT); For example, i if you have const myForm = document.getElementById("myForm"); then put const formData = new FormData(myForm);
@basselturky4027 2 жыл бұрын
Thank you legend
@Lord-v2s 3 жыл бұрын
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*?
@holup5035 2 жыл бұрын
same
@davidmajdandzic7388 3 жыл бұрын
Thank you so much! Your video just ended hours of head scratching and screaming swear words! 🥳
@stepdate 4 жыл бұрын
Thank you, this was extremely helpful!
@bjornleonhenry9750 4 жыл бұрын
your videos are explosive 💥 coding dynamite
@inteltone 11 ай бұрын
Thanks a lot for this video tutorial! It is very useful.
@cjmarchi 5 жыл бұрын
simple and 100% working solution. Tks :)
@dcode-software 5 жыл бұрын
No problem :)
@steveg917 4 жыл бұрын
not 100%.. the "this" go to the window.. you need to bind it
@coredatallc5671 4 жыл бұрын
Very nice video. Now extend this to include MySQL query response using PDO and you will have a gem.
@sir.charless.7443 4 жыл бұрын
you didn't show the php file, how do use the the data sended?
@hitsu-kun 3 жыл бұрын
Thanks so much! You save my day
@dcbiz 3 жыл бұрын
Very helpful and much appreciated.
@tamas-pamas 5 жыл бұрын
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
@randomvideoguy3340 4 жыл бұрын
I love you for posting this ty so much
@dcode-software 4 жыл бұрын
No worries mate 😁
@pastorfred2543 4 жыл бұрын
Wow..This is super useful.. Thanks
@arashnikbakht129 4 жыл бұрын
Great video, how can we send inputs like this one
@alexandreferreira5477 3 жыл бұрын
Awesome! Thank you
@brunogigliofreitas 3 жыл бұрын
The "this" didnt work for me
@holup5035 2 жыл бұрын
you probably used arrow function in addEventListener
@angladephil 4 жыл бұрын
Thank you very much for this and your other tutorials, which I follow with great attention and benefit ! Sorry I come late after this video, but I have a question : how to handle so simply the FormData object (and it's data) without PHP? For example through Node.js ? Thank you in advance . Greetings from France.
@guruprasadhmathivanan4040 3 жыл бұрын
Hi sir I'm guruprasadh
@guruprasadhmathivanan4040 3 жыл бұрын
From india
@guruprasadhmathivanan4040 3 жыл бұрын
I've created an rest api using spring boot
@guruprasadhmathivanan4040 3 жыл бұрын
But I give value using postman
@camera-support-rentals 4 жыл бұрын
Okay I got it to work and put the data into my database. How do I use the response to let the user know the post worked? I would like to do an if statement on the text variable but not sure how to do it? Thanks for the great easy to understand tutorial
@madsnielsen9295 4 жыл бұрын
Thank you very much for this tutorial. Can i ask what kind of parameter type would my restful API POST request need?
@muhammadzubair4754 4 жыл бұрын
how to load html form data using json data file?
@nidhishettigar6981 2 жыл бұрын
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!!!
@syrymzhakypbekov1949 4 жыл бұрын
very informative !
@kolinsukhadia3219 3 жыл бұрын
array(0){ } server show this so what I have to do to solve this error?
@IBITZEE 4 жыл бұрын
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 (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...
@jeremiahjohnson1594 4 жыл бұрын
this is with php...what of js
@s.agamerz7962 3 жыл бұрын
What a typing speed
@dcode-software 3 жыл бұрын
👀👀👀
@handersenadriano1309 5 жыл бұрын
thanks very much
@dcode-software 5 жыл бұрын
No worries mate!
@troonder6274 Жыл бұрын
NICE NICE NICE, thanks ^^
@ajmalnajath1399 3 жыл бұрын
this is keybaord asmr
@shazythings8798 2 жыл бұрын
Helpful
@luismaestro23 3 жыл бұрын
what about the php file where you recieve the formdata
@dipzera1025 4 жыл бұрын
How would you combine this with validation?
@robitops1547 4 жыл бұрын
Thanks but input:file return Object not value
@guruprasadhmathivanan4040 3 жыл бұрын
How to send form data using fetch api with raw data
@bryandelacruz9066 5 жыл бұрын
thanks do you also have a code for edit and delete? thanks
@kemmrthappy2804 5 жыл бұрын
thanks a bit can u try out using fetch api with a input type=file
@naomifeedcow 3 жыл бұрын
Awesome!
@vazhamikadze4018 2 жыл бұрын
Thanks
@camera-support-rentals 4 жыл бұрын
I took out all of my arrow functions and it still does not show up in the PHP page. Is there something I have to do in the php page to see the data?
@dcode-software 4 жыл бұрын
Which web server are you using?
@camera-support-rentals 4 жыл бұрын
@@dcode-software Hi Dom thanks for the help! XAMP MYSQL PHP ! the var_dump($_POST) on the php page is showing array(0) { } however I can see my response and I can see the message that I echoed from the php page in the console.log(). my javascript page is seperate from my html page I don't know if that makes a difference. Thanks for your help!
@camera-support-rentals 4 жыл бұрын
I need to put the data into my database
@undefined4851 4 жыл бұрын
@@camera-support-rentals have you figured out solution? Getting same thing as you
@joe-powell 2 жыл бұрын
@@dcode-software I have the same problem, is it a problem using localhost?
@WebdesignemFoco 3 жыл бұрын
Wonderfull
@augischadiegils.5109 2 жыл бұрын
❤️❤️❤️
@dopamine_Seeker 3 жыл бұрын
not working I am furious in my local host $_post not working as I expected
@guruprasadhmathivanan4040 3 жыл бұрын
In postman
@augischadiegils.5109 2 жыл бұрын
❤️❤️
@Amigaudio 6 ай бұрын
Really? Your name is Dom?
@deepumon.d3148 4 жыл бұрын
You didn't showed data s in console.log()
@cat-typing2803 4 жыл бұрын
Don't use arrow function in addEventListener
@tazulislam2698 2 жыл бұрын
Bro, How to pass 2d array? [["",""],["",""]]
@allandiego1446 4 жыл бұрын
If I put in with the empty action is correct too?
@ulvidamirli2758 4 жыл бұрын
Yes, e.preventDefault() ignores it.
@epickaowca8850 5 жыл бұрын
canno't post /login.php POST 404 not found can some one help me ?
@dcode-software 5 жыл бұрын
My wild guess it's to remove the / in front
@dcode-software 5 жыл бұрын
If that helped you then check out my video on different kinds of links: kzfaq.info/get/bejne/nMCafsZj0LOviYk.html It should clear it up for you
@epickaowca8850 5 жыл бұрын
that can't help because i write code like you in this video so i don't have ''/'' in front :(
@epickaowca8850 5 жыл бұрын
i can fetch data from any file but i can't use post method because of 404 error
@dcode-software 5 жыл бұрын
404 means not found so you just need to ensure login.php exists and if it does then ensure the path you've given is correct
@truonghoang7982 3 жыл бұрын
Ok ok 👌
@MrPDTaylor 5 жыл бұрын
First
@josiahsprankle1146 3 жыл бұрын
You moved very quickly, didn't explain much, and were hard to follow.
The Coding Train
Рет қаралды 340 М.