So this lesson, we're going to be creating a simulation app where we're using the form data and we're
going to be showing you how you can do it both within a get method as well as opposed to the server.
And then when the server is just responding back with a JSON version of the content that we've submitted.
So in this case, we're doing a post method and we're also going to be showing you and demonstrating,
doing a get method, using the form data that's available within the.
Webpage this lesson, we're going to be making some updates to what we did in the last lesson, updating
the content to have a form and then the input fields are going to be placed within the form.
So make some updates to the structure.
And instead of having a output, we're going to update the output and we can call this the my form and
using document and create elements.
And the element that we're creating is going to be the form.
And then within the form, so first let's add the form to the page, so using the document body and
we're just going to pen the form to the body of the page and add in the elements into the my form so
that all of the inputs are going to get moved into the my form.
So we'll add the button
and also where we create the elements.
We're going to attend the elements and then also attend the initial input field all into my form, so
we're changing the structure.
Let's go take a quick look at our source code just to make sure that everything is contained within
the form.
And so now the button can serve as a submit button for the form it.
Actually, let's just before we continue, let's rename this and I'm going to rename this to called
for so that we have a different source file that we're working off, which is going to be different
than the original project.
So once you've confirmed that you've got all of the content of the form, you can use the form object
content and output it as your URL search parameter.
So this is going to simulate the same thing that we do when we submit the form.
So if you have a form and you do a submit on it, it's going to automatically generate the you rl that
it's submitting to the server.
So we want to send this via the fetch request.
So we need to simulate that and build that before we can send it over.
So when we do click the button, we're loading the data and this is where it's going to be different
because the base URL is still going to be the same.
But we're going to generate the rest of the search parameters and we're going to do this dynamically
with JavaScript code.
So we've got our base, your URL, and we want append to it and get all of the values from the form.
So we're still going to have to loop through all of the input fields.
So I'm going to add and I'm going to keep some of this here and the construction is going to be different.
So let me update that.
And setting up we're going to create first define that.
We're going to have a new form object.
So let's create the form data object.
And with JavaScript, that's done using the new form data.
So it's going to generate the empty form data.
And then if you want to append to it, we can spend it with in key value pairs format.
So that would be that if we select the form data and we want to attend to the form data.
So if we have a value of ID and we want to set the value of it to be 99, that way we can append to
the form data.
Now, most of the time you are going to be using the put the post method instead of using the get method
and this type of format.
But this is just in case you do want to use the get method, it's going to be that similar format where
you're constructing the form data.
And then we could loop through and as we loop through each one of the elements, we would be returning
back the element name and then associating that element value to the object, sort of building the entire
form object dynamically and as well as using the query selector.
You can also select the.
Form data.
So when we're directly creating the form data, we already have the form object within my form so we
can specify the object that we want to have the form content to.
And over here.
What we can do is as well, we can take the form data and we can get the entries from that object,
so I'll block comment about this content or go back into the console and do a click.
So also, we want to prevent the default action of submitting the actual form.
So we'll get the event object and e prevent.
Default so will prevent any of the default actions on submitting the form, so we've got the iterator
here.
And if we want to get all of the form data, we use the three dots and that will output all of the form
data.
Using the form data entries.
And structure them within a data object.
So let's add in a value for data, and this can be an array since this array of object and using the
form data entries and let's log out data as it's going to be data that we're going to send in and then
we're going to reconstruct this data object.
So we're going to use the URAI component and code.
You are a component and let's create another object called parameters.
And then taking the data object using map and map is an array method.
So we can return back the contents and map it back, so using X as our object value and let's return
back using map the contents of the array and then we can output that content into the console as well.
So what we're doing is worse or worse, constructing their request.
You the string object.
So doing this weekend in ENCODE.
So we can also just return back X.
The first item within X.
And equal signed and do X one, but we should also do the encoding into it.
So let's try this first and see what we've got.
And just as we did before with the joint.
We could join the response data back together and you can shorten this by having just one.
By chaining them together, so getting parameters and then using join and the and sign, so that will
join it together.
So this is going to be so far the response on request object that we're constructing.
So we've got the request object almost completed.
And just to be sure that it passes properly within their request object, we can use the encoding,
the UI and code, you are a component option, so let's add that in.
So using and code, you are a component.
So this encode set within that, you are a format and that actually should be lowercase.
So this is just in case we've got some odd characters that aren't going to encode properly, and that's
actually a component component.
And I'm going to do the same for the other value as well.
So this instead of having the spaces, it does the percentage sign 20 and so this can still get red
on the server, but this is a way of handling spaces and so that within your request, you, Earl,
you don't have any spaces.
So now that we've constructed that next step is to create the you are also we've got the base, your
URL and add to it our response object.
And then finally, let's lastly, let's do the get you Earl, and save that.
And we've got the output here at the top, so that's what's adding it to the top.
So it's making the full trip to the server and returning back the content.
So we can also update this, and I actually what I do is I like to log it out into the console or just
out in the console message there so we can update this to a post method as well.
Let's make some updates to it will create a new function.
And this one can be you get post.
And what this will do is this will get the post data and do the request.
So we need to pick up the data first and start a load data.
It'll go directly to get post.
So we'll remove out the load data.
And we can get all of the form contents dynamically.
So, first off, let's prevent the default action of submitting the form so the form is not going to
get submitted.
And then we want to build out all of the foreign data as well so we can make the request.
And also, let's set up a variable for options and we'll make the fetch request with the options.
So the options itself.
This is the fetch options.
So set that up as an object.
So setting the method that we want to use and we want to use post as the method and within the body
of the options.
So within the body object, this is where we're going to actually send the form data.
So using JSON String Afie, we're going to string a fly the body object.
So let's create the body object and using creating a brand new form data object, doing a new form data
and selecting the life form as the source for the data and just as we did with the get request.
And in this case, we want to construct a body object, so let's create our body object and this is
where we're going to deposit and append to it.
So as we loop through the form data.
And for each one of the items within the form data, so it's capturing all the contents of the form.
Let's get a value and a key that's being returned back within the function and for the values and keys
taking the body and using the bracket notation, we're setting the same key and then also assigning
a value to it.
So basically we're recreating the form, but we're constructing it and adding it to the body object.
So this is going to return back a jigsaw and formatted body object, and that's what we're going to
be submitting ultimately to the fetch request.
So let's see what that looks like and do the request.
So there's our JSON or JavaScript object thinner JSON format that we're ready to submit.
And when we string a fight, this turns it into one big string object.
So let's create the fetch request.
So using the base you URL and the options that we've just set up make the request.
So when we get back the response from the server, the response is going to be authentic JSON format
and then we can take the response contents and put it to the page.
So for now, we'll get out using that console log of data.
So this object, and it's identical to the one that we just sent and this is just coming from the server,
so it's a server response to the content from the input field.
So there's a lot of information that you can set up with the fetch request.
So you can also add headers and some server end points require different headers credentials so all
of this can be contained.
So some of them are a lot more complex, but they've got the body, they've got the method, but then
they can also set the course.
You can do cache, credentials, headers, setting the different content types redirects reference policies.
So it depends on what type of data you're getting back.
There's a lot of options that you can add in for the options on a post.
And again, this is dependent on what you're expecting from the server, so also with the content from
the input field, you can construct the JSON object.
And there's also some other examples on the Mozilla developer network where they're looping through
and they're appending to the form data manually where they're building up the form data object.
And there's even more options there for the headers and how you can set the headers, so in order to
add headers, you can construct new headers.
So just my headers and then you would add the headers object into the options like that, and I'll see
if it still works.
So it still works because we haven't added any headers.
And if we do add some of the headers, it could throw off our request.
So it doesn't always help to add in headers.
So you've got to make sure what type of headers your endpoint is expecting.
That's what you're able to add in.
So once we've made the request, let's output the object data.
So just as we did before where we got the data being returned back and this time we're doing a post
request to the get request.
So we click it and we're populating the content on the page.
The tasks and challenges for this lesson is to use the form data, so using JavaScript form data to
get the contents of the form, reconstruct your page, object to be contained within a form, and then
select all of the fields within the form using JavaScript, using the get method, make fetch request,
sending the data over to the server, using get and then also try the sending over the data from the
form using the post method and also update the page contents with the server response JSON object that
is returned back whenever you do any types of sending of the content over.
So either the cat or the post and output the contents on the page.