POST form data using JavaScript's Fetch API

so in this video i'm going to show you how you can submit form data using javascript's fetch api so all you need to do to get started is to create a basic form so i've got one here with an id of form so i can select it by that in javascript two inputs username and password and a submit button of type submit so the first thing i'm going to want to do in javascript is to select the form so for that i create a new variable which i will call form and i'm going to select the form element by its id which is form okay next i want to add an event listener to the form listening out for a submit event so when the user presses the submit button so the event type is submit and when that happens i want to run a function and that function is going to handle the submission of the form data now the first thing i want to do in the function is prevent the default behavior of the html form so it doesn't try to redirect me to another page or anything like that and i can do that by calling prevent default method on the event that's occurring now the great thing about javascript these days is there are lots of inbuilt object constructors that can be useful and we're going to be using one here what i'm going to do is create a new instance of a form data object okay so you can call that new form data so i now need to pass the form element into the parentheses and what this is going to produce now is a new object of type form data and that's going to contain an array of arrays each of the arrays nested in the main array is going to correspond to each of the form elements i have here so each of these arrays is going to contain two items the first one is going to be the key effectively so username and the second one is going to be the input value for password the first one is going to be password and the second one is going to be the input value so what i need to do now is pass in the form element between the parentheses and what this line of code is going to produce is a new object of type form data and that's going to contain an array of arrays and each of the nested arrays corresponds to a form element in my form so each of the arrays is going to contain two items the first one is going to be username and the second item in that array is going to be the value given for username and the second array is going to have a key of password that's going to be the first item in the array and the second item is going to be the given password so i'll show that to you to do that i need to save this as a new variable so i'm going to call this payload now because it's a special type of object calling console.log won't show me the contents of payload what i need to do instead is spread the contents into an array and console.log that so let's see what this shows up in the browser now if i enter any old values here and then click submit you see that there's an array containing two arrays and in each of these nested arrays is the name of a form element and its corresponding data now if i want i can now post this object to a server in the normal way using fetch so what i need to do is call fetch and as an endpoint i'm going to post this to an example endpoint a test endpoint provided by http bin in case you don't have your own server to post to you might consider also using this so i'm going to post http http dot org forward slash post now in the second position of the fetch request i need to specify a couple of things so the first thing is the method and that's going to be post and the other thing i need to specify is the data i want to send in this post so i want to send payload now this would already make a fetch post request but in a real world setting i'd also want to see what the server response is so i'm going to handle that down here so res that that's going to come through initially as json so i want to convert that from json so i can apply the json method to it that's going to make it a javascript object and in the next line i have the this return value available to me so i'm just going to console.log that and also i might want to catch any error so i can handle this by just logging the error to the console okay so that should now be working let's head over to the browser i click refresh enter some data any old input so you can see that we got a response back from the server let's take a look inside you can see in the form property the username and password that we sent so this works perfectly fine but if you're sending text based data then there's a more efficient way of sending it and that is sending the text data as a url encoded string so we can easily convert the form data object we sent to a url encoded string using another inbuilt object constructor the name of this one is url search params and all i need to do is pass in the form data object and that's going to convert it to a url encoded string now i need to save that somewhere so i'm going to save that in a new variable i'll call that payload and then i need to change the original payload variable to something else so i'll name it pre-payload and i need to change that here as well now i don't actually need to make any changes to the fetch request the payload is being passed in as the body still and that's the new url encoded string you might be wondering why i'm not setting the content type in this example and also why i didn't set it in the last example the reason is that fetch automatically detects both of these object types form data and url search params and sets content type automatically so you don't need to do that in fact if you do then it could result in an error if you get it wrong so it's definitely better to just let fetch handle it it will set the content type all by itself okay so let's see this in action now the sending of the url encoded string so i'm going to enter any old data again click submit and again we get a response from the server inside the form property you can see that the data has been sent to the server the username and password now as i was saying the content type was specified automatically as url encoded form just to show you that it is set automatically if i try and send the prepayload you'll see that content type will be different it will be a multi-part form so inside the headers so i didn't change it but you can see now that content type is different it's multi-part form data not url encoded string so that is it for this tutorial on sending form data with fetch i hope you found it useful if you did don't forget to hit the like button below and if you'd like to see more content like this from us in the future don't forget to subscribe to the channel

Channel: OpenJavaScript

Views: 27,248

Keywords:

Id: TTf0mMl0Sc4

Length: 8min 0sec (480 seconds)

Published: Tue Apr 26 2022