Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So the next attribute we're gonna do here is h x disabled ELT. Not to be confused with h x disable which is a completely completely different thing. So the basic idea is have you ever submitted a form and had it click twice or your user clicked twice, You know, maybe it takes a long time to process, maybe it does something behind the scenes. It's a little complicated. So when you click it, you know, you have to worry about, well, what happens if it gets submitted twice?
Lazarus:What does that do? Maybe it breaks the first submission. Maybe it makes a duplicate submission. So you have, you know, creating 2 accounts or something. You know, it's there's a lot of issues that can happen.
Lazarus:Maybe it throws errors, kind of unpredictable, but none of it is fun. So what if the button could just nicely disable itself while the request was en route? Once the request is made, the button's just disabled. Can't go and, you know, submit again. Well, you can do that with h t m x, and that is h x dash disabled dash e l t equals this.
Lazarus:That you put that on your submit button, and when it's clicked, whatever it's submitting, whatever it's, you know, whatever request it's making, until it gets a response, that button's gonna be disabled. So that's not the only thing it can do. You know, that's a a basic use case, but maybe you want to disable other inputs. So let's say you have a whole form, and you've got text areas, you've got inputs, and you wanna disable everything. So they can't change things or make edits until that's saved or added or stored or whatever it's gonna whatever you're gonna do with that data.
Lazarus:So what you can do is you can put in a comma separated list of CSS selectors for what should be disabled. So I mean this is it's it's in the advanced section because, you know, maybe this actually could be one of the core basics, probably should be just something you can use pretty much every single time on a form. There's no downside to it. And it kind of freeze framing the form, at the submission, so that you you're not changing things afterwards or clicking twice and all these kind of things. So I think this is a really useful one.
Lazarus:You can do it. You can because it's using a CSS selector on this, you know, you can do kind of crazier stuff too. You can just like if you just put a checks disabled elt equals button, that'll just disable every button on the on your page. So you've got options and you can kind of play with it and and see what works best. But yeah.
Lazarus:A great one maybe even an essential one for for most forms.