Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
13. Accessing form processing state

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
OK, so we're going to cover one more form specific thing before we move on to some other inertia concepts. And this is the form's processing state. We saw this earlier when we dumped the form out on the page. So let's do exactly that again, just so we can see what's happening here.
00:17
So let's go ahead and dump the form out here and let's hit post. And what you would have just about caught is that processing was set to true while that submitted. I can do that again now that the errors have come in. And you can see that this momentarily switches to true while the form is processing before we've been redirected technically back.
00:38
So what we can actually do is make use of this to do things like disable buttons so we don't get duplicate submits and even change entire styles. So let's go over to our post or comment store controller and let's just add a fake delay in here. So I'm going to add a sleep with PHP to two seconds and let's go back over now. When we do post this through, you can see that if we do this before our validation, that would help.
01:09
And if we go back, you'll now see that processing is true for a couple of seconds now before we see processing false. So what we can now do is just access this property on our form and just change whatever we need to while this is processing. We might want to show an overall message. We might want to disable the submit button.
01:31
We might want to show an overall modal or, you know, really whatever your application needs. So over on index, let's go down to the button just here. Let's pull all of these attributes down just so we have a little bit more space to breathe. So the first thing that I'm going to do is conditionally bind in the disabled attribute on this button using view.
01:51
Now, how do we access this processing property inside of here? Well, we just access the form directly and we access processing. So now if we go over and click on this, this button is now disabled. I cannot submit this again until the request actually comes back.
02:08
So now we can do something a little bit more visual and maybe bind in a class in here. So let's set the opacity of this to half if the form is processing. And now if we just get rid of our form up there, we're not going to need that anymore. We have a nice state where we have that button disabled and also visually disabled as well.
02:34
So, of course, when I go ahead and post this through normally now, we're going to see that delay. But this is just going to work as normal. The button is now available and of course, everything has already been cleared out. So finally, just in case we forget, let's go back over to our comment store controller and just comment that sleep out.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.