(upbeat music) Now let's have a look at one more way that we can have our form and the fields in the form interact with each other. And in this case, what we're gonna be doing is talking about if one field has a value and the value of that field should help determine the value of another one, we're gonna look at how that works. So if you look at our app here, we've got two fields.

we're gonna look at how that works. So if you look at our app here, we've got two fields. We have the effort in days and the amount of days it will take to deliver something is probably pretty proportional to the amount of money it will cost. And so we're gonna say, let's pretend in this world, whatever company we're at, it costs $1,000 a day to build something. So we'll just do a pretty simple mathematical calculation.

it costs $1,000 a day to build something. So we'll just do a pretty simple mathematical calculation. When this changes, we're going to update this times 1,000. Let's do that first. Let's go back to our code. We have this priority that's like right in the middle and I just wanna get it out of the way. So I'm gonna move it up here. And I'm just gonna hide this date picker for, just for this video,

And I'm just gonna hide this date picker for, just for this video, just so we can really focus our attention on these two fields. So let's start by doing it with live wire requests and doing it in PHP. So we have the effort in days here. It's required, it's numeric. We're gonna say, first we have to make it live because as something changes, we need to make a live wire request

because as something changes, we need to make a live wire request and come back to the server. And then we're gonna say after state updated. We have a function here, we need two things. We need the state of what was typed in to the field. Then we also need set and make sure we get the filament utility set. And so here, this is gonna be pretty simple. We just are going to say set cost is state times 1,000.

And so here, this is gonna be pretty simple. We just are going to say set cost is state times 1,000. So this method allows you to set another value in the form. This is cost and it is live. So I believe this should work. Let's go to our browser. We refresh the page. I'm gonna change the effort in days to 15 or sorry. I tried to type 15, but this is actually one of the problems with this approach

I tried to type 15, but this is actually one of the problems with this approach is if I'm trying to type a bunch of stuff, sometimes that request takes a long time. Again, I'm not gonna slow down or throttle the speed, but you can see how this might be a problem, right? One way to fix that here is we can say on live. We can say on blur is true. And so when we do this, if we come back here now, I can type whatever I want in here

And so when we do this, if we come back here now, I can type whatever I want in here and it's not trying to update. It's just when I leave the field. That's when that evaluates. That's a nicer approach. So if you're going to use the live wire filament approach to doing something like this, I do recommend doing an on blur, especially if it's a text input.

I do recommend doing an on blur, especially if it's a text input. If it's a select input, every time you select it, it's gonna make the change. So this works and it's fine. And if you're okay with the network request, that's all you need to do. So let's make this a little more interesting. And we're gonna add a toggle here. And I just want the toggle to be is high cost.

And we're gonna add a toggle here. And I just want the toggle to be is high cost. Let's say we have some very expensive senior developers and we just want to add this. And if you click this, we're gonna make it like $1,500 a day or something like that. So let's get rid of all the stuff that was added automatically. We'll just say is high cost. And so after state updated here, we're going to have set and we're gonna do get

And so after state updated here, we're going to have set and we're gonna do get because now we need to first of all, we need to make it live, so live. And then we need to get the value of effort in days. And we'll say if state will set the costs to get effort in days times 1500. And then else, we're gonna wanna do it times 1000. And then similarly up here, when we're doing this, we would need to check get as well.

And then similarly up here, when we're doing this, we would need to check get as well. So let's do, we're just gonna duplicate the code for a minute. I know this is not the best way to do it, but we're gonna set the cost to get is high cost. 1500, otherwise 1000. And this all needs to be multiplied by state. Okay, so now, no matter which one we change, whether we change the effort in days or is high cost,

Okay, so now, no matter which one we change, whether we change the effort in days or is high cost, this should work, let's go back here. If we put 10 days, we have $10,000 that do is high cost, it goes up to $15,000. And if I change this to seven, it's just going to 1500. Why is this just going to 1500? Oh, okay, 'cause there's my bug. I have to do time state here. There we go.

I have to do time state here. There we go. Now it makes sense. All right, so effort in days is 10, it's 10,000 is high cost, 15. If I go down to seven, all of that works. So now it's working great, but this is another instance where maybe we don't want to make the network request for this. Maybe we wanna do this on the front end.

for this. Maybe we wanna do this on the front end. And this I think is actually a better instance of using JavaScript in your filament forms because we don't have the, is required or not issue. So let's go back and take a look at this. So now let's comment all of this out. Let's comment all of this out here. And I don't want live. Okay.

And I don't want live. Okay. So now we're gonna re-implement this with JavaScript. So we can just say after state updated JS. Now I'm going to just take this but I'm gonna delete everything. I just want to have this here so I can like console log test. And I think this is going to work if I refresh the page. Nope, it's not working because I missed the D. So now if I refresh the page, there we go.

Nope, it's not working because I missed the D. So now if I refresh the page, there we go. And let's go ahead and get our console out. Take a look at this. And every time I make a change on this field, I'm getting my console log. So this is different from the hidden or visible JS in that you just had to return basically something that evaluated to true or false. If you did anything else,

that evaluated to true or false. If you did anything else, if you tried to console log in that, it wouldn't work. In this case, you can because this is just a method in JavaScript that you can do whatever you need to in. So in this case, we can get rid of this and we can just let's see what this filled out. We can get whether it's high cost or not. We can see the effort is the state that was passed through and then the cost per day.

We can see the effort is the state that was passed through and then the cost per day. And this is, looks like pretty good JavaScript. Let's see how this works. I'm gonna refresh the page. I'm gonna change the effort to 10. And that's all working well. And if I go to is high cost and now I say 100, that's working too. So we have the effort in days working really well, 82.

that's working too. So we have the effort in days working really well, 82. Everything is evaluating. And then we just need to get the toggle to work as well. So after state updated JS. And let's see, I think this is probably right as well. So we can get the state of this with the state variable. We're using get to get the other thing. And if we come back here, refresh the page. I've got 100, that's 100,000 is high cost goes to 150.

And if we come back here, refresh the page. I've got 100, that's 100,000 is high cost goes to 150. I can bring it back. So all of this is working really well. Now, one thing we have to look at before we kind of close this out. So I'm gonna close out this and let's try to create a new feature. I'm gonna create this, set a priority, put something here. And let's try to create this. I got an error and it said unknown column is high cost.

And let's try to create this. I got an error and it said unknown column is high cost. So what we did is we put this is high costs into our form, but it's not actually a field on the feature model. And so filament is trying to set this and doesn't know what to do with it. So this is really easy to handle. If you're ever gonna put something in your form that you don't want to be evaluated when it's submitted, all you have to do is say dehydrated.

that you don't want to be evaluated when it's submitted, all you have to do is say dehydrated. It's down here and we're gonna pass in false. And so what this does is it just tells filament, ignore this when you're going to do the create action. So let's refresh the page, new feature, one here, we'll do nine days, high cost, create. And everything works, that high cost just disappears. It's still in the form. If I go to edit, I can see it here.

It's still in the form. If I go to edit, I can see it here. We do have a problem here. If we're not gonna persist it to the database of if you notice, when I opened this up, it was not selected. So we didn't actually store in the database that this is high cost. So that could be a problem. But there might be some other scenarios

So that could be a problem. But there might be some other scenarios where there's no need to ever store this, but it's just important to know to dehydrate those fields so that you don't have issues when you're submitting the form.