hx-vals is "global" and cannot be "disinherited"

[nikalexis]

When you have defined hx-vals there is no way to avoid submitting ALL values inherited from parent nodes (actually the whole page).
I think hx-disinherit should work in the following case, but it's not. Both size and color are submitted.
I tried both hx-disinherit="hx-vals" and hx-disinherit="*" but this dis-inheritance is not working.
If you also try hx-vals="unset" on a child all values are deleted, even from the parent nodes.
It seems htmx uses a "global" vals variable to set / unset / change values, but I think this is a strange behavior and excludes many use cases with a page with many requests and different values per request.

<form hx-get="/submit-size-and-color" hx-vals='{"size": "large", "color": "blue"}' hx-disinherit="hx-vals">    
    <button hx-get="/submit-size-only" hx-vals='{"size": "small"}'>Button</button>
    <input type="text" name="color" value="red">
</form>

[alexbezhan]

I can confirm the same bug in my system.

[alexbezhan]

I found a workaround using hx-params="not ".

[scriptogre]

I have the same issue. Hope there will be some kind of fix for this.

[achimnol]

Another bump here while working on aio-libs/aiomonitor#371...

[altunyurt]

In my particular case, i had a piece of child template loaded from a div on "load" as shown below. My case might not be fit for yours, but it might give a clue for appropriate solution:

     <!-- loader parent -->
      <div id="questionview" 
           hx-trigger="load"
           hx-target="this"
           hx-swap="innerHTML"
           hx-post="/game/question/random"
           hx-vals='{{ hxVals | tojson }}'></div>

    <!-- child template -->
    ...
    <div class="choice"
         hx-post="/game/answer/save"
         hx-vals='{{ vals | tojson }}'
         hx-trigger="click once"
         hx-target="#choices"
         hx-swap="outerHTML">{{ choice.body }}</div>

and this results in something like:

   <div id="questionview ... >
      ...
      <div class="choice" ... />
  </div>

The result would then inherit the whole hxVals from the questionview alongside the vals. I solved the issue by simply moving the caller into a child div of questionview, completely overwriting it on load by setting hx-swap="outerHTML" as shown below. I still got the same result but got rid of hx-vals inherited from parent questionview.

      <!-- loader parent -->
    <div id="questionview">
      <div hx-trigger="load"
           hx-target="this"
           hx-swap="outerHTML"
           hx-post="/game/question/random"
           hx-vals='{{ hxVals | tojson }}'></div>
    </div>

[yannvanhalewyn]

This is a problem for us too. We have a dropzone (parent) and within it a button that toggles and populates a sidebar with candidates (child).

It breaks the child interaction. On the parent dropzone we need to access a nested event attribute that is not present in the event during the child interaction. The child interaction should not even try to access it but we can't disable that.

[FeliciousX]

having the same issue here. Caught me by surprise, I thought hx-disinherit weren't working.

[HellConnector]

I found a workaround using hx-params="not ".

That really helps. Thanks. Also it's possible to use comma separated list for all inherited values like hx-param="not <param1>,<param2>"

[Kolterdyx]

Still an issue, bump

[DaanVervacke]

I have the same issue, bump

[chapmandu]

Eek.. I burned a couple of hours on this.

[andrescevp]

this is still a problem... I am having this issue with hx-include, I am fixing this with an extension. I guess you can extend this for hx-vals. Not sure if could be a global fix.

It only support input elements, potentially you can extend it for your use case.

My use case is to enable server side form input validations

// @ts-ignore
const strictHtmxValues: HtmxExtension = {
    "onEvent": (name, evt: CustomEvent) => {
        if (name === "htmx:configRequest") {
            const sourceElement = evt.detail.elt;
            const hxInclude = sourceElement.getAttribute('hx-include');
            const elements = htmx.findAll(hxInclude);

            const formData = new FormData();

            elements.forEach((element: HTMLInputElement) => {
                const elementValue = element.value;
                const elementName = element.getAttribute('name');
                formData.set(elementName, elementValue);
            });

            evt.detail.formData = formData;
            evt.detail.parameters = formData;
        }
        return true;
    },
};

usage:

<div id="organization_place_slug_row" class="h-100 w-100 flex flex-col space-y space-y-1 font-sm">
        <div class="flex flex-row space-x-2 items-center">
<label class="form-label  required" for="organization_place_slug">Slug</label>
</div>       
<input type="text" id="organization_place_slug" name="organization_place[slug]" required="required" hx-post="/admin/domain/organization/place/new" hx-trigger="input delay:200ms" hx-target="#organization_place_slug_row" hx-select="#organization_place_slug_row" hx-swap="outerHTML" hx-ext="strictHtmxValues" hx-include="#organization_place_slug" data-forms--slug-target="inputSlug" class="form-input"/>    
</div>