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.

Episode summary

In this episode, we explore the form processing state in Inertia.js forms—basically, how you can tell when your form is actively being submitted. We start by dumping out the form object on the page and watching its processing property briefly switch to true every time we hit the submit button.

To make things easier to see, we even add an artificial delay on the backend using PHP's sleep function, so the form stays stuck in the processing state for a couple of seconds. This gives us a chance to demo how the processing property works in real time.

With this new insight, we show practical ways to use this property—like automatically disabling the submit button while the form is processing to prevent duplicate submits, and visually indicating the inactive state by reducing button opacity. We walk through the code to add these features, ensuring the UI gives users clear feedback whenever a submission is in progress.

By the end, you’ll know exactly how to use the processing state to polish your forms and improve your app’s user experience.

Episode discussion

No comments, yet. Be the first!