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

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 90

  • @webdev4786
    @webdev4786 3 ปีที่แล้ว +1

    people like you are making the world a better place.

  • @1000hourshower
    @1000hourshower ปีที่แล้ว

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

  • @karentutor5470
    @karentutor5470 4 ปีที่แล้ว +8

    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!

  • @Lord-v2s
    @Lord-v2s 3 ปีที่แล้ว +7

    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*?

  • @Unerty
    @Unerty 4 ปีที่แล้ว +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);

  • @dcode-software
    @dcode-software  2 ปีที่แล้ว

    *RELATED VIDEO: UPLOAD FILES WITH THE FETCH API*
    th-cam.com/video/cei2Ch683q0/w-d-xo.html
    🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
    www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

  • @inteltone
    @inteltone ปีที่แล้ว

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

  • @hoo_chuchu_0901
    @hoo_chuchu_0901 4 ปีที่แล้ว

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

  • @sir.charless.7443
    @sir.charless.7443 4 ปีที่แล้ว +7

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

  • @Levelord92
    @Levelord92 5 ปีที่แล้ว +8

    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.

  • @bjornleonhenry9750
    @bjornleonhenry9750 5 ปีที่แล้ว +2

    your videos are explosive 💥 coding dynamite

  • @davidmajdandzic7388
    @davidmajdandzic7388 3 ปีที่แล้ว +1

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

  • @tamas-pamas
    @tamas-pamas 5 ปีที่แล้ว +3

    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

  • @stepdate
    @stepdate 4 ปีที่แล้ว +3

    Thank you, this was extremely helpful!

  • @akshitkhajuria4362
    @akshitkhajuria4362 4 ปีที่แล้ว +6

    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.

  • @cjmarchi
    @cjmarchi 5 ปีที่แล้ว +6

    simple and 100% working solution. Tks :)

    • @dcode-software
      @dcode-software  5 ปีที่แล้ว +1

      No problem :)

    • @steveg917
      @steveg917 5 ปีที่แล้ว

      not 100%.. the "this" go to the window.. you need to bind it

  • @hitsu-kun
    @hitsu-kun 3 ปีที่แล้ว

    Thanks so much! You save my day

  • @muhammadzubair4754
    @muhammadzubair4754 4 ปีที่แล้ว +1

    how to load html form data using json data file?

  • @kolinsukhadia3219
    @kolinsukhadia3219 3 ปีที่แล้ว

    array(0){ } server show this so what I have to do to solve this error?

  • @randomvideoguy3340
    @randomvideoguy3340 4 ปีที่แล้ว +1

    I love you for posting this ty so much

  • @dcbiz
    @dcbiz 4 ปีที่แล้ว

    Very helpful and much appreciated.

  • @nidhishettigar6981
    @nidhishettigar6981 3 ปีที่แล้ว

    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!!!

  • @coredatallc5671
    @coredatallc5671 5 ปีที่แล้ว +3

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

  • @olifer-br
    @olifer-br 3 ปีที่แล้ว

    Awesome!
    Thank you

  • @IBITZEE
    @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...

  • @luismaestro23
    @luismaestro23 3 ปีที่แล้ว

    what about the php file where you recieve the formdata

  • @pastorfred2543
    @pastorfred2543 4 ปีที่แล้ว

    Wow..This is super useful.. Thanks

  • @dipzera1025
    @dipzera1025 4 ปีที่แล้ว

    How would you combine this with validation?

  • @madsnielsen9295
    @madsnielsen9295 5 ปีที่แล้ว

    Thank you very much for this tutorial. Can i ask what kind of parameter type would my restful API POST request need?

  • @arashnikbakht129
    @arashnikbakht129 4 ปีที่แล้ว +2

    Great video, how can we send inputs like this one

  • @syrymzhakypbekov1949
    @syrymzhakypbekov1949 4 ปีที่แล้ว

    very informative !

  • @shazythings8798
    @shazythings8798 2 ปีที่แล้ว

    Helpful

  • @bryandelacruz9066
    @bryandelacruz9066 5 ปีที่แล้ว

    thanks do you also have a code for edit and delete? thanks

  • @angladephil
    @angladephil 5 ปีที่แล้ว +5

    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.

  • @jeremiahjohnson1594
    @jeremiahjohnson1594 5 ปีที่แล้ว +1

    this is with php...what of js

  • @troonder6274
    @troonder6274 ปีที่แล้ว

    NICE NICE NICE, thanks ^^

  • @epickaowca8850
    @epickaowca8850 5 ปีที่แล้ว

    canno't post /login.php
    POST 404 not found
    can some one help me ?

    • @dcode-software
      @dcode-software  5 ปีที่แล้ว

      My wild guess it's to remove the / in front

    • @dcode-software
      @dcode-software  5 ปีที่แล้ว

      If that helped you then check out my video on different kinds of links: th-cam.com/video/fZjKc2kMKYU/w-d-xo.html
      It should clear it up for you

    • @epickaowca8850
      @epickaowca8850 5 ปีที่แล้ว

      that can't help because i write code like you in this video so i don't have ''/'' in front :(

    • @epickaowca8850
      @epickaowca8850 5 ปีที่แล้ว

      i can fetch data from any file but i can't use post method because of 404 error

    • @dcode-software
      @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

  • @brunogigliofreitas
    @brunogigliofreitas 3 ปีที่แล้ว +1

    The "this" didnt work for me

    • @holup5035
      @holup5035 2 ปีที่แล้ว

      you probably used arrow function in addEventListener

  • @WebdesignemFoco
    @WebdesignemFoco 3 ปีที่แล้ว

    Wonderfull

  • @handersenadriano1309
    @handersenadriano1309 5 ปีที่แล้ว +1

    thanks very much

  • @guruprasadhmathivanan4040
    @guruprasadhmathivanan4040 3 ปีที่แล้ว

    How to send form data using fetch api with raw data

  • @allandiego1446
    @allandiego1446 4 ปีที่แล้ว

    If I put in with the empty action is correct too?

    • @ulvidamirli2758
      @ulvidamirli2758 4 ปีที่แล้ว

      Yes, e.preventDefault() ignores it.

  • @kemmrthappy2804
    @kemmrthappy2804 5 ปีที่แล้ว

    thanks a bit can u try out using fetch api with a input type=file

  • @naomifeedcow
    @naomifeedcow 4 ปีที่แล้ว

    Awesome!

  • @vazhamikadze4018
    @vazhamikadze4018 2 ปีที่แล้ว

    Thanks

  • @robitops1547
    @robitops1547 4 ปีที่แล้ว

    Thanks
    but input:file return Object not value

  • @s.agamerz7962
    @s.agamerz7962 3 ปีที่แล้ว

    What a typing speed

  • @ajmalnajath1399
    @ajmalnajath1399 3 ปีที่แล้ว

    this is keybaord asmr

  • @deepumon.d3148
    @deepumon.d3148 5 ปีที่แล้ว

    You didn't showed data s in console.log()

    • @cat-typing2803
      @cat-typing2803 5 ปีที่แล้ว

      Don't use arrow function in addEventListener

  • @tazulislam2698
    @tazulislam2698 2 ปีที่แล้ว

    Bro,
    How to pass 2d array? [["",""],["",""]]

  • @dopamine_Seeker
    @dopamine_Seeker 3 ปีที่แล้ว

    not working I am furious
    in my local host $_post not working as I expected

  • @augischadiegils.5109
    @augischadiegils.5109 2 ปีที่แล้ว

    ❤️❤️

  • @guruprasadhmathivanan4040
    @guruprasadhmathivanan4040 3 ปีที่แล้ว

    In postman

  • @Amigaudio
    @Amigaudio 10 หลายเดือนก่อน

    Really? Your name is Dom?

  • @truonghoang7982
    @truonghoang7982 4 ปีที่แล้ว

    Ok ok 👌

  • @MrPDTaylor
    @MrPDTaylor 6 ปีที่แล้ว +1

    First

  • @josiahsprankle1146
    @josiahsprankle1146 4 ปีที่แล้ว

    You moved very quickly, didn't explain much, and were hard to follow.

  • @augischadiegils.5109
    @augischadiegils.5109 2 ปีที่แล้ว

    ❤️❤️❤️