We have the basic functionality for our dashboard complete, I say that. We are at least loading the invoices into the dashboard, but the form itself doesn't necessarily work the way that we want. I mean, it does work because whenever we submit it, it is making a POST request and it is submitting that just like it should, but it's just an HTTP request. There's no dynamic loading of content going on here. So we want to change that because inside of our dashboard, we don't want to navigate to the open invoices or the approved invoices. We just want to keep it here so that the new content after we submit the form is

we don't want to navigate to the open invoices or the approved invoices. We just want to keep it here so that the new content after we submit the form is loaded right where the old content was. But if we go to the individual page for the approved or open invoices, we still want this to work, but we also want it to work with HTMX. We want that content to be dynamically loaded so we can easily do this. All we have to do is just use some HTMX attributes. So let's go back to our list view and we can do this in several different places. The first is the button. So we can say hx-post because we want to make a POST request to our POST URL and

The first is the button. So we can say HX.post because we want to make a POST request to our POST URL and that's going to be fine. But we also need to set the targets because we need to load the content inside of the element with an ID of invoice-list. And then we also want to set the swap to outerHTML because we don't want to swap the inner HTML. We want to swap the outer. So with that done, it works. This is going to be just fine. So if we, let's say, let's submit this one here for approval. Just keep your eye on here. Whenever we submit,

let's submit this one here for approval. Just keep your eye on here. Whenever we submit, we can see that it goes away, but the page didn't completely reload. So we loaded that new content dynamically, which means that inside of our dashboard, we are going to see the same thing. So if we take a look at the open invoices, let's just pick this one Richie Inc, this first one. If we submit this, it's going to submit that for approval. We can see that the invoice is gone, but it didn't completely refresh the page. It dynamically loaded the new list, right?

but it didn't completely refresh the page. It dynamically loaded the new list, right? Where we wanted it to go. So great, fantastic. We have that functionality, but let's look at some other options because the button isn't the only thing we can also apply these same attributes to the form. And in fact, we might could say that the form is really where these attributes should go. So we can add them there. I'm not going to go through the whole process, but it is going to work the same as it did before. Now there are some things that we need to talk about here.

but it is going to work the same as it did before. Now there are some things that we need to talk about here. The first example had us using the HTMX attributes on the button. Well, the button was inside of a form and HTMX was aware of that. So whenever we clicked on that button, it sent all of the form data that needed to be sent with the request. So if we go back to the browser, you know, we have all of these check boxes. And so because the button is inside of the form, HTMX grabbed all of the form data that needed to be sent with that request so that the server could process it just like we would normally think it would.

HTMX grabbed all of the form data that needed to be sent with that request so that the server could process it just like we would normally think it would. The same is true for whenever we put the HTMX attributes on the form because it's a form. So therefore, whenever the form was submitted, HTMX included all of the other form fields that needed to be included with the request. So we didn't have to do anything special there. However, what if we put those attributes on an element outside of a form? And you might think, why would we do that? And in this particular case, I'd say, yeah, there's no reason to do that. But for the sake of an example, let's put our HX attributes on our section component here.

I'd say, yeah, there's no reason to do that. But for the sake of an example, let's put our hx attributes on our section component here. Now this is rendered as a div actually no size rendered as a section element. So this means that, well, we can take a look. Let's inspect here. And if we take a look at the section, we have our ID of invoice-list. We have our CSS classes, and then we have our hx targets. Here's our hx post. So these things are being applied to a section element. And we might think, how is that going to work? But it's really quite simple. Anytime that we add an hx get or an hx post or any one of those requests,

how is that going to work? But it's really quite simple. Anytime that we add an HXGet or an HXPost or any one of those requests, attributes to an element, we have essentially made that element actionable. So the user could click on that section element and it would send that request, except that in this particular case, this section is not inside of a form. So it is simply going to make a POST request to the URL, and it's not going to supply anything else with that request. In fact, we can see that let's open up the developer tools. Let's go to the network. And if I click anywhere on that section element, we should see a request. There it is.

Let's go to the network. And if I click anywhere on that section element, we should see a request. There it is. We can see that the status was a 419, which is because the CSRF token was not included with that request. And you know, nothing else was included. If we inspect this and look at the request, there's no payload with that request whatsoever. So there are going to be times when we want to make a request from an element, but it's not going to be inside of a form. It's not going to have any extra data,

but it's not going to be inside of a form. It's not going to have any extra data, but we might want to include extra data with that request. Well, we can use the hx-include attribute, and then we simply provide a CSS selector for the element or elements that we want to include with the request. So in this case, we still want to include all of the form elements. So what we could do to make this easy is add an ID. We can say that this is the invoice-form. And so inside of this hx-include,

We can say that this is the invoice form. And so inside of this HX include, we can say that we want to work with the form with an ID of invoice_form, and we want to include all of the input elements. So now whenever we go back to the browser, let's clear out the network and let's, well, we have some that are already selected. So let's just click anywhere on that section element. And we are going to see that the POST request was successfully sent. We have a status of 302. If we look at the request data,

And we are going to see that the POST request was successfully sent. We have a status of 302. If we look at the request data, we can see that now the token for the CSRF was included as well as all of the check boxes that we included as well. So that's great. That means that we can make a request really from anywhere within our page and it can include all of the information that we need, except that I don't necessarily want the User to have to click somewhere other than the button. I want them to just click on the button. Well, we can do that with another attribute. It's called hx-trigger. Now the hx-trigger attribute is complex.

we can do that with another attribute. It's called hx-trigger. Now the hx-trigger attribute is complex. There's a lot of things that we can do, but basically the idea is that we are going to trigger the request and we can control how that request is triggered. So if we want it to be on the click event, which is of course the default, then that's all that we have to do. But if we want to trigger the request on a mouse over, then we can do that or mouse out or on a key up. I mean any valid DOM events we can use here,

then we can do that or mouse out or on a key up. I mean any valid DOM events we can use here, but we can also say that we want the event from a given element. So let's do this. Let's give our button an ID. Let's just call it submitButton. And so we can trigger this request from the click event from a button with an ID of submitButton. And so let's go back to the browser. Let's select one of these invoices. Let's clear out the network tab. And if I click anywhere on the section, we can see that it no longer works. Whenever I click on the submitButton, however,

And if I click anywhere on the section, we can see that it no longer works. Whenever I click on the submit button, however, it is going to submit that form. But notice we did a full page refresh, and that's because we need to come back to the form and we need to essentially disable the submit event. So we will just return false there. So as I mentioned in this particular example, this isn't a great place to do it, but for the sake of an example, this is a really great place to put it. So let's refresh. Let's clear out the network. Let's select one of these. We will click on the submit button. It submitted our data. It received the content and then it dynamically loaded that content.

We will click on the submit button. It submitted our data. It received the content and then it dynamically loaded that content. So if we go back to our dashboard, that same functionality should work because well it's just loaded here. So let's select a couple of these to submit for approval. We will submit. It worked. We're good to go. So there are a few things that I want you to take away from this episode. The first is if you use HTMX attributes on a button that's inside of a form or a form itself, then it's just going to submit the form. That's perfectly fine. That's the behavior that we would expect and want.

a form itself, then it's just going to submit the form. That's perfectly fine. That's the behavior that we would expect and want. So there's really nothing special there. However, there are going to be times when you can't put the HTMX attributes on a button or a form, but you still want to submit the form. Well, you can still do that. All you need to do is use the hx/include attribute to include whatever elements that you want with that request, but then you can also trigger the request on a completely different element. Just use the hx/trigger attribute.

but then you can also trigger the request on a completely different element. Just use the hx-trigger attribute, specify the events that you want to trigger the request, and then the CSS selector of the elements that you want to trigger that request. And then you're golden.