hx-include and <tbody><tr><td>

[PorcoRosso85]

Hi, folks!!

This works well

        <input
          name="message"
          type="text"
          placeholder="message"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
        />
        <button
          type="button"
          hx-post="/about/contact"
          hx-include="[name='email'], [name='first-name'], [name='last-name'], [name='message']"
          hx-swap="none"
          class="w-full bg-black text-white px-4 py-2 border border-black rounded-md hover:bg-gray-800 focus:outline-none"
        

How to make this work well?
Neither are not working

<tr>
        <td>id</td>
        <td>
          <input type="text" name="firstname" />
        </td>
        <td>
          <input type="text" name="lastname" />
        </td>
        <td>
          <input type="email" name="email" />
        </td>
        <td>
          <button
            type="submit"
            hx-include="[name='email'], [name='firstname'], [name='lastname']"
            OR
            hx-include="closest tr"
            hx-trigger="click"
          >
            EDS
          </button>
        </td>
</tr>

[Telroshan]

Hey, what do you mean by "not working" exactly?
I set up a JSFiddle with the code you provided above, and this one with the second hx-include syntax you mentioned (i.e. closest tr).

• Please note that since you had forgotten to define a hx-post on your button like in the first code sample, the button wasn't doing anything on click (which is perfectly normal as it isn't told what request to do at all)
• I added the same hx-post than your first code sample's button, you can see how the request is correctly made and properly includes the values of the other inputs in your browser's network tab

Hope this helps!

[PorcoRosso85]

Excuse my kindless question, I should show you more.

    <tr
      hx-post="/about/works/table/rows/save"
      hx-trigger="dblclick"
      hx-target="this"
      hx-swap="outerHTML"
      class=""
    >
      <td>id</td>
      <td>
        <input type="text" name="firstname" placeholder="firstname" />
      </td>
      <td>
        <input type="text" name="lastname" placeholder="lastname" />
      </td>
      <td>
        <input type="email" name="email" placeholder="email" />
      </td>
      <td>
        <button type="submit" hx-include="closest tr" hx-trigger="click">
          EDS
        </button>
      </td>
    </tr>

"Not working" means "returning undefined", which also means that server (with node.js) can't recognize.
But now working well because I moved post request to button as you showed me.
Thanks.