00:02
- So now all we have left to do with our form component is add in the dot accessors so that we can specify the HTTP method
00:11
that we wanna use and spoof with form dot whatever the method is. So let's go ahead and add that in now. So this is gonna be pretty simple. So let's go ahead and add in a new file within our form components.
00:21
We'll call this put.edge. And all that we need to do is call @form, pass in the props, and then add in the method of.
00:29
Now we wanna put method of put here second after we spread in the props because we wanna overwrite it if it's provided within the props. Since we're specifically within our form,
00:38
put.edge component here, we explicitly want this to be a put request. So we'll overwrite whatever's within our props with method of put.
00:46
Then we go ahead and end our form and await slots main to add in the slots. Give that a save. Now we can jump back into our form demonstration page,
00:55
copy this little block here, paste it in down here. Not quite sure what to call this section, so we'll just call this form methods. And we'll do form.put, put that to put,
01:04
switch that to put, and switch this to put. If we give that a save, open up our terminal, should be able to jump back into our browser now. And we have our form method section right here.
01:12
Send off a put, jump back into our console, and you can see that we get back method put there. So our form.put is working A-okay. That was pretty simple. So now let's just go ahead and duplicate that
01:21
for the other methods. So I'm just gonna copy the whole file and we'll paste this in here twice. So once for patch and once for delete. Go ahead and rename this one delete, and we'll go ahead and rename this one patch.
01:30
Within each of these, we just need to update the method. So we're within delete right here. So we'll go ahead and set this one to delete, and then we'll switch over to patch and switch this one to patch. Dive back into our demonstration page.
01:39
Let's give this a copy and let's paste it once and twice. I'm gonna keep it in the same order that we have our base form demonstrations here. So we don't need to do post
01:48
because post is just gonna be the base form, but we'll start a patch. So we'll do patch, put, and then delete. So we'll do patch here, patch there, and patch once more. And then lastly, we'll switch this one to delete,
01:57
delete, and then delete. Give that a save. Let's open up our terminal, jump back into the browser, and send each of those out. So we have patch, put, and then delete. Check out our console,
02:05
and we have patch, put, and delete. So that's working A-okay there as well. We can try to mess this up. So within our form.patch, let's specify a method and let's say delete.
02:15
We'll give this a save, jump back into our browser. And now if we send patch off, it's still sending out this patch because inside of these components, we're overriding whatever method is provided in the props
02:25
with the patch by adding this in after the object spread. And then although it doesn't make a whole lot of sense, we can go ahead and add in client-side form handling
02:33
with this as well. So we can do @submit. We'll add in our prevent there. Alert, patch, just like so. Give that a save, jump back into our browser, click on patch, and there we go.
02:42
So our client-side form submission handling is working A-okay there as well with AlpineJS.
