htmx: How to make each row behave like a form?

Question

I would like to have a table like this, and make every row behave like a <form>.

If the user hits "Save" only the current row should get submitted to the server.

<table>
 <tr>
  <th>Name</th>
  <th>Email</th>
  <th></th>
 </tr>
 <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
  <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
  <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
</table>

I tried <tr hx-post="..."> ... but this submits all input elements, not just the current row.

I played around with hx-include and hx-params, but found not solution up to now.

Instead of hacking htmx, I could straight-forward htmx by using css: https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form/15600151#15600151 (since I don't need colspan or rowspan). — guettli, Jan 14 '21 at 22:03

score 2 · Accepted Answer · edited Jun 24 '21 at 12:55

Due to the way tables elements work, you can't really use a wrapping element here, so you have a unique ID per row and use that to identify the inputs for the row.

You should be able to use the ID to generate a class on the inputs and then include them using the hx-include attribute:

 <tr>
  <td><input class='row1-inputs' type="text" name="name"></td>
  <td><input class='row1-inputs' type="text" name="email"></td>
  <td><input hx-include='.row1-inputs' type="submit" value="Save"></td>
 </tr>

htmx: How to make each row behave like a form?

1 Answers1