Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
We're gonna talk about h x vals, which lets you send values with your request, send parameters. And you basically put those parameters, h x val h x val's equals, and then your equals is going to be a valid JSON format string. So, you know, so curly brackets, because it's JSON, it has to be strict with, double quotes, but, you know, you have your your ID or your, your key value, just like a regular JSON format. Hopefully everyone's familiar with that. But it it allows you to send extra values with your request.
Lazarus:So it's sort of it's kind of in the same family as h x include. So h x include allows you to send values, but you select using a CSS selector which values on the page, or in the form, or, you know, whichever values you want, you use h x include with the c s s selector to do that. So this is a little different. H x vals lets you just put your values with your key value pairs in line. And, you know, if they aren't needed anywhere else on your page, if they're just needed for this, that might be a good option.
Lazarus:It's kind of equivalent to putting a hidden input, which is something you might do. You know, you want to send some extra values with your form or something like that. In regular HTML, when you're submitting something, you might just put a hidden input, input type equals hidden, value name value, etcetera. So this basically is similar to that. If it's just a little thing, you don't need to add it to your HTML, you can just put it right in line with HX Vals.
Lazarus:It works with any Ajax request, so HX post, get, put patch, delete all those. The default is that those static values in a valid JSON array, but you can also pull dynamic values from JavaScript if you want to. And that can be kind of its own complex query, you know, you can build your JSON however you want using a dynamic you can just run JavaScript in line, at runtime. And you do that by pref like prefixing your h x vals equals, then you do j s colon or JavaScript colon, and then inside that is where you put your JavaScript that's going to build a valid JSON. And that's a little risky because, you know, you introduce if if you're kind of, building through JavaScript at runtime, you just need to be a little careful if you're doing, you know, user based stuff and, you could run into sort of cross site scripting issues.
Lazarus:That's a whole sort of separate discussion, but you have the ability to to build that JSON value array in line, if you want to. Or just, you know, pass us a static one, which is kind of the default. If you use the the JavaScript you also have access to the event object. So, in JavaScript, you know, usually if there's something something happens like something that triggered this event, so an h x trigger might be a click, might be a key up. You can get the value of that attribute or or some n attribute on that clicked item.
Lazarus:So everything that goes along with that event item you have access to. So if it was a key up, you could pass that event dot key. Or if it was a click you could pass, you know, something about the clicked item. So you could think of this, the h x vals, as kind of a friend of h x include because it also deals with the parameters that are gonna get passed. And the next time we're going to talk about another attribute you can use to control your parameters which is h x params, which is lets you filter out to get the exact values you want to.