HTMX form submission with a table-CodePudding

I am trying to use the Click to Edit example with HTMX, by using a table.

Each row (<tr>) is a database record that looks like this:

<tr hx-target="this" hx-swap="outerHTML">
<form>
        <td><input type="text" name="name" value="{{row.name}}"></td>
        <td><input type="text" name="email" value="{{row.email}}"></td>
        <td>
          <button class="btn" hx-put="/edit/{{row.id}}">Update<buttun>
          <button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
        </td>
</form>
</tr>

Unfortunately, when I print the request body with request.form.keys on my flask server, I see that that the request is empty ([])

It seems like the button click did not trigger the form submission with all the input fields.

How can I make the button click trigger the form submission with all the fields populated ?

CodePudding user response：

Ah, just remembered: you are working with tables here. Unfortunately tables are super picky about the elements inside them, and I bet form doesn't work where you put it. If you inspect the DOM I bet you'll find that there isn't really a form element in there, so htmx isn't finding it to include the inputs.

You'll need to rework this to include the values in a different way, for example using hx-include.

Something like this:

<tr hx-target="this" hx-swap="outerHTML">
        <td><input type="text" name="name" value="{{row.name}}"></td>
        <td><input type="text" name="email" value="{{row.email}}"></td>
        <td>
          <button class="btn" hx-put="/edit/{{row.id}}"
                  hx-include="closest tr">
              Update
          <button>
          <button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
        </td>
</tr>

If you are willing to switch from table rows to divs, the original code you had should work fine.

This is an unfortunate situation where tables are not very flexible.

update: @guettli reminded me that you can include any element and it will include all inputs below it, so you can just use closest tr in your hx-include attribute. Thanks!

CodePudding user response：

Can you post what the request looks like from the chrome or firefox console?

This looks correct, in general.