The basics: hx-params

ok, you are submitting a form.. but what if you don't want to submit the whole thing?
Use what only i call "the mysql selector of htmx"

hx-params="first_name, last_name, state"

or what if you wanted to exclude a field?

hx-params="not secret_field"

What is hx-pod?

Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs

Lazarus: 00:00

We're gonna talk a little bit about h x params, which is used along with some of the other ones to kind of change the parameters that go into each request. So you could use it along with h x include or h x vals. And what h x params does is it filters the fields that are gonna be sent, the parameters. So and you can use it in different ways. The default, like, if you just left it off, is the same as using the star parameter.

Lazarus: 00:29

So, you know, think of it it's like it's like a MySQL select star. Basically, star just means everything that would normally be included gets included. So you can if you don't, if you're just going to do that anyway, you don't need to use h x params, but there's probably other times where you'd want to use a star just so you can see that you're sending, all the all the values along with the request. So you can also use it to select a single field. So let's say you have a form and there's a whole bunch of fields.

Lazarus: 01:00

There's like the state, the user inputs, some select, some drop downs, and you just when you you have a button when you click that button, you just want to send one thing and update it. So like last name or something. For whatever reason, you're just updating one thing. So you don't want to send the whole form along with it. You just want to send that one thing.

Lazarus: 01:21

You can do hxparams equals, and then the name of that field. So that's how you can use it with a single field. If you have multiple fields that you want to send, you just put commas in between. So you can just put a comma separated list of all the fields. You can also do not in front of the fields.

Lazarus: 01:42

So if you do not and then a comma separated list of fields, it's going to exclude those fields from being sent, which is great if you just have, you know, some inputs in there that are just for the front end or something or or just for whatever reason. You get to decide which fields get sent, and h x params is what helps you do that. It's one of those things that goes along with h x include. So h x include allows you to say let's say there's a form somewhere else on the page, or just you get to decide which fields around the whole the whole app using a CSS selector. H x include lets you decide which fields are going to be part of your request.

Lazarus: 02:25

And then you can use that with h x params. So you could include a whole form from somewhere else on the page, and then use h x params to pick out exactly which fields you want to be sent. So just, you know, it's it's a filter of all your fields of all your requests. And you can use you can also use none. So if you want to, you know, have maybe some conditional thing where if they click this button, you're not sending any of the fields.

Lazarus: 02:50

So you have some options, but the most important ones are, you know, you have star, you have a comma separated list of fields to send, you have the not options to exclude fields, and then you have the none. And it works together with h x include and h x vals and really lets you customize the requests that you are sending, and you can use this with h x get or h x post. So if it's, whatever the type of submission is, whatever the type of page or data you're trying to get back, this will go along with it and let you really sort of see right in line, you know, in a similar sort of way. I think of it like like a my sequel when you're selecting which fields when you're doing, you know, select blank blank blank from, those fields that you're putting in, that's similar to what you're doing here with h x params. You're you can decide or you can also exclude certain fields.

Lazarus: 03:42

So it's a nice tool for sort of customizing your requests and which fields get included.