The basics: hx-include
In the last episode on h x post, I mentioned h x include as a way to, submit an h x post, for instance, of a form and form data, that from anywhere. So the form might be somewhere else, and you want to include that with your post request that you're sending, so you just have the form ID and you can do h x include equals and then a CSS selector with that form ID to include everything that's part of that form. So we'll just go into h x include a little more. So what are some reasons you'd want to do this and and what else can you do with it? So one thing you could do is you could assign specific IDs to any input on the page.
Lazarus:Just anywhere, you know, anywhere on the page that you want to have an input. Could be a text box, a text area, a select, and then you could put in your h x include. So then you have a button that's going to submit something, or you know a div that's you can set it to, to trigger on click, and you do h x include, and then you can just put a comma separated list of each of those IDs for all the different inputs. So you can sort of gather your inputs together from around the page, wherever you want them, and submit them all, gather them together in one place. It'll be very easy right there.
Lazarus:It's in one single attribute on the button. H x include equals, and then, you know, hashtag whatever your pound, whatever your ids are, comma, between each. So that's one kind of really flexible way to put together what you want to do, what you want to submit. You can also use because they're c s s selectors, you can use some other options with c s s. You can use relative selectors.
Lazarus:So you could do closest form. Closest is is would mean it goes up through the DOM until it reaches the first element, the first tag that matches what you put there. So we can maybe talk about, your CSS selector options in a little more detail later, but the main thing with h x include is that it gives you just the full flexibility to pull together all the data you want from around the page and put it into your request. One of the good reasons you might want to do this, a really common thing is, let's say you have a table, and each row, a lot of times you kind of want each row to be basically like a form, but it's not valid c it's not valid HTML to have, a form that is directly beneath a row, a t r tag, because you have to have t d's. So what you could do is just put your inputs, either assign them, each individual ids, or just use a CSS selector to, to find each of the inputs within that row, within that tr, and then submit them all.
Lazarus:So that that way you just can use h x include, equals, and then you put all your inputs that you want. One of the really nice things about it is that you can just see exactly what's going to be submitted right there. And if you don't know, you can look at the the hash you know, you can look at the CSS selector and then find that CSS selector on the page yourself. So it's just kind of a a really easy convenient way to figure out which values you want to submit, or to submit extra values along with what's already being submitted as part of your form. And you can use hxinclude with a get or a post.
Lazarus:You know, or any other sort of those requests. The put, the patch, the delete. So it mixes and matches with all the other ones and lets you kind of build your own form from data on the page.
