So this time around, let's try changing our vets request that we're making in JavaScript from a get
to a post and let's actually send all of our form data that we're going to need, including our start
and end date.
And let's also generalize our custom function in our JavaScript module.
It's a fair bit to do, but none of it is terribly difficult.
Let's get started.
So to start with, I am going to go over to my roots file, which is right here, and I will change
search availability from a get to a post.
So that was easy.
Now it's a post request, but there's a bit more work to do here.
So let's go over to our generals page and look at our HTML.
So right now I'm at this point, I'm creating my fetch request and sending it as I get.
And we need to make that an actual post, which isn't that hard.
So first thing we're going to do is look at the demo we're sending.
Well, we have a form and that form has an input here, which is start an input here, which is an end.
It doesn't have our series CSF token.
So we're going to have to add that somewhere.
And I could put it right in the form, but I'm not going to.
And we also need to change the way that we're calling our fetch.
So let's think about this.
First of all, that form has an ID, so I'm going to get that form and I'm going to store it in a variable.
So let and I'll just call it form equal document get element by ID.
And what's the idea of this form?
It is right up here.
Let's copy that.
So I don't make any typos and paste it in here.
Now I have a reference to that form.
Well I'm going to do next is I'm going to program programmatically create form data exactly the kind
of data or exactly the kind of information that is sent in a post request.
And fortunately, JavaScript has a nice little function for doing that, which goes like this let and
I'll call it form data equal a new and the JavaScript type is called, not surprisingly, form data,
and that will actually take an argument.
And the argument I can pass it is the reference to the form I want to get the data from which I stored
in a variable form.
So what I've done with those two lines of code, the first one is I got the form and I stored a reference
to it in a variable.
And here in the second one I created a form data variable that contains all of the elements, all of
the inputs from the form that I stored in that that variable named as form.
So now I have exactly what I need to post with one exception.
I don't have my CSF took it.
Now, as I said, I could have gone up here, created it and hit an input and that would work just fine.
But there's another way I can append into that form.
Form did a variable.
I can just say form data don't append and what do I want to append.
Well, I want to append something exactly as it would appear in a form input.
So it has a name and it needs to be called CSS, RF underscore token and it has to have a value.
And I'm going to just pull that right out of the data that I pass to every one of my goaland templates.
So in Double Curlee quotes Dot and the name that is in my template data object is C SRF took it and
there I have now appended that to it.
So all I need to do now is to change this fetch request from a get to a post.
Well that actually will take two arguments so I can put a comma here and then in curly brackets I can
construct what I want to add to it.
And what I want to change it to is from its default method of get to method post.
And I want to append in there the body of the request, which is going to be my form of data.
And with that little change, what I have done in essence is convert my fetch from a get to a post and
I've included all the information I want to post to send along in that post with my form there.
So that will have my start, my end and the one I manually appended my CSF token C SRF token, I spelled
that right.
So let's save this, let's open our terminal, stop the application just to make sure everything is
working the way it's supposed to because I change my get to a post in my route.
So if I don't do this it's not going to work.
Start it up.
It compiles.
Let's go over to our Web browser, reload the page, clear the console and try checking availability.
So my starts the seventeenth, my end is the eighteenth and earlier are the 17th and 18th and I click
OK.
And it worked.
It called it, it posted it, it included the CSR, css, RF token.
That is great.
Now the last thing I want to do in the last lecture I mentioned over here in my base layout that this
function, my function called custom.
It is not exactly.
Generalized, it's only good if I'm posting information that has the start in the end, and that's not
helpful at all.
So what I'm going to do instead is look at this.
I want to copy will open out of there exactly as it exists.
I'm going to go over to Generals' Page and the part where I actually make the call to attention.
I'm going to just before the callback and after the title.
I want to paste that right in there.
Then what I'm doing is specifying as part of my constructor, my will open Lodrick, then I'll go back
to my base layout and I'm going to delete all this stuff and just going to say, just like I did down
here, where I say if callback is not equal to undefined, then run callback here.
I'm going to say if will open is not even sorry if Seada will open.
And no, parentheses is not exactly equal to undefined, in other words, if it specified when I make
the call to this function and execute, zero will open.
Which will work, that should work just fine, because back over here on the generals page, all I'm
doing, I could have used this as an anonymous function, but this is just another syntax to do.
Exactly the same thing I'm specifying Will Open is set to this function and that's being passed over
to my my prompt function custom.
So I've done it with will open.
I could do the same thing with did open.
I can copy this, go back over to my roots file, not my e-mail, my generals page and place it down.
Where is it here.
This is on base level one of the general's page.
There it is.
And I can put it anywhere but I'll put it right here.
Did open exactly the same logic, but it has to have a comma after it, of course.
Otherwise I'm going to get a JavaScript error because I have this and this will open is being passed
a function did open is being passed a function.
So that works just fine.
And I can go back to base layout, delete these lines and use exactly the same logic and just say if
Ceder did open with no parentheses is not exactly equal to undefined undefined then call Seada did open
and I should work.
So let's save this.
Make sure everything saved go back over to our JavaScript or our web browser, reload the page, clear
the console, put some dates in there.
So 23 and 24 there.
I've got 23 and 24 click OK.
And it worked just fine.
So now I have a truly useful function that I can call anywhere past anything I want for the contents
and just by writing HTML and storing it at a JavaScript variable.
And I can also specify what I want to happen on will open pre confirmed did open anything I want to.
I can do that.
I'm not doing with pre confirm right now, but I could do exactly the same thing.
Since we're not using that.
Why don't we do.
Exactly.
Just leave.
That is, I'll just leave it alone.
It's not hurting anything right now because I'm not calling it.
But the logic is if I wanted to make pre confirms something I can override when I call the custom function,
then I can use exactly the same logic to put an if statement in here and you're good to go.
So there now we know how to post, we know how to post to Ajax.
We know how to send a get request Ajax and we know how to handle the response that we're sending back.
So in the next lecture we need to look at server side validation.
We have some great client side validation for some of our forms, but there's none actually working
at all on this form.
I can submit that and it works just fine.
It says, OK, you set no dates, but there's no client side JavaScript validation.
No, I could add that manually.
It would be kind of a chore to do it since I'm doing my send of the data using Ajax and that's very
fast.
I don't have to load the entire page over again.
I'm going to do my validation for that form and indeed for all of our forms as time goes on on the server
side.
And we'll get started on that in the next lecture.