Element passing own name/value on trigger?

[superDuperCyberTechno]

I'm new. For 30 minutes or so, I couldn't get htmx working. A lot of trial and error later, I realized that triggered elements don't pass their own name/value via the AJAX request. To me this seemed to be the intuitive way of handling a single dataset:

<button hx-get="/something" name="id" value="1">Click me!</button>

So, now I have at least two alternatives to do the same...
I can pass the parameters directly to the hx-get attribute:

<button hx-get="/something?id=1">Click me!</button>

This seems to be going against the idea of defaulting to the name/value-convention htmx is adopting.

Or, I can add a hidden field within my triggered element with the name/value:

<button hx-get="/something" >
    <input type=hidden" name="id" value="1">
    Click me!
</button>

This seems to add a lot of overhead HTML.

---

Why isn't the first example default behaviour? E.g., placing a simple name/value-set within a button itself seems to be a lot cleaner and easier to understand than either of the two alternatives...

Anyway, my two cents. Perhaps it's supposed to work this way and I simply borked it...

[Telroshan]

Hey, could you tell us what htmx version you are using ?

If I try the exact setup you described, it works, you can see it on this JSFiddle
Where the code is

<script src="https://unpkg.com/[email protected]"></script>
<button hx-get="/something" name="id" value="1">Click me!</button>

When I click on the button, the request URl properly includes the id parameter:

Hope this helps!

[superDuperCyberTechno]

I'm using the latest (2.0.4) and it certainly does help. I will try to replicate when I get the time, thank you for answering.

[superDuperCyberTechno]

So, I realize the problem now. In an effort to simplify my problem, I used a button as an example element.

The original problem arose from me trying to trigger a tr-element with a click. In this specific case (apparently, any element that is not implicitely tied to a form), the query parameters (name/value) is not included in the request.

Any way to enable this? Why isn't this a default feature?

[Telroshan]

Would you mind sharing your code to see exactly what you're trying to achieve? Thanks!

[superDuperCyberTechno]

Here you go: https://jsfiddle.net/zh6rjc5v/

button passes name/value, tr and div doesn't.

[Telroshan]

Oh ok, the issue is that you define a name and value on non-input elements, which isn't a standard practice.
You can see the list of tags supporting the value attribute on this MDN page for instance.
You can see on the <button> element doc that it supports name/value in its attributes list, while the <tr> doc doesn't include it, nor does the <div> doc

• Note that, for accessibility purposes, you should try to have as less non-standard situations as possible. You could for example add a form inside your tr, or have a form external to your table, and form elements in your table that reference it using their own form attribute. Try to use forms, buttons, inputs as much as possible to benefit from the native accessibility they bring along.
• If you still have to go with a non-standard setup, you might want to use hx-vals instead, or any the various techniques you described above, to pass your values along the request. In your example, adding hx-vals='{"id":1}' to your tr properly sends the value along the request

Hope this helps!

[superDuperCyberTechno]

Thank you, I can get behind maintaining convention. hx-vals seems to hit the spot.