Summary
htmx 1.8.0 is sending data via form data.
htmx 2.0.4 is sending data via URL.
Example
Here's a minimal version of index.html from contact-app.
<!doctype html>
<html lang="">
<head>
<script src="/static/js/htmx-1.8.0.js"></script>
{# <script src="/[email protected]/dist/htmx.min.js"></script> #}
</head>
<body>
<main>
<form x-data="{ selected: [] }">
<table>
<thead>
<tr>
<th></th> <th>First</th> <th>Last</th> <th>Phone</th> <th>Email</th> <th></th>
</tr>
</thead>
<tbody>
{% for contact in contacts %}
<tr>
<td><input type="checkbox" name="selected_contact_ids" value="{{ contact.id }}" x-model="selected"></td>
<td>{{ contact.first }}</td>
<td>{{ contact.last }}</td>
<td>{{ contact.phone }}</td>
<td>{{ contact.email }}</td>
<td>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<button hx-delete="/contacts" hx-confirm="Confirm deletion" hx-target="body">
Delete Selected Contacts
</button>
</form>
</main>
</body>
</html>
If I select some contacts:
and click Delete Selected Contacts, DevTools shows that the contact values are sent via form data:
If instead of htmx 1.8.0 I use 2.0.4:
{# <script src="/static/js/htmx-1.8.0.js"></script> #}
<script src="/[email protected]/dist/htmx.min.js"></script>
the selected values are sent via URL:
Question
Is there a way to get htmx 2.0.4 to send the selected values via form data like in version 1.8.0?
Summary
htmx 1.8.0 is sending data via form data.
htmx 2.0.4 is sending data via URL.
Example
Here's a minimal version of index.html from contact-app.
<!doctype html>
<html lang="">
<head>
<script src="/static/js/htmx-1.8.0.js"></script>
{# <script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script> #}
</head>
<body>
<main>
<form x-data="{ selected: [] }">
<table>
<thead>
<tr>
<th></th> <th>First</th> <th>Last</th> <th>Phone</th> <th>Email</th> <th></th>
</tr>
</thead>
<tbody>
{% for contact in contacts %}
<tr>
<td><input type="checkbox" name="selected_contact_ids" value="{{ contact.id }}" x-model="selected"></td>
<td>{{ contact.first }}</td>
<td>{{ contact.last }}</td>
<td>{{ contact.phone }}</td>
<td>{{ contact.email }}</td>
<td>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<button hx-delete="/contacts" hx-confirm="Confirm deletion" hx-target="body">
Delete Selected Contacts
</button>
</form>
</main>
</body>
</html>
If I select some contacts:
and click Delete Selected Contacts, DevTools shows that the contact values are sent via form data:
If instead of htmx 1.8.0 I use 2.0.4:
{# <script src="/static/js/htmx-1.8.0.js"></script> #}
<script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
the selected values are sent via URL:
Question
Is there a way to get htmx 2.0.4 to send the selected values via form data like in version 1.8.0?
Share Improve this question asked Jan 20 at 0:11 dharmatechdharmatech 9,51710 gold badges47 silver badges104 bronze badges 2 |1 Answer
Reset to default 1The migration guide:
https://htmx.org/migration-guide-htmx-1/
mentions this.
If you want
DELETErequests to use a form-encoded body rather than parameters, reverthtmx.config.methodsThatUseUrlParamsto["get"](it’s a little crazy, butDELETE, according to the spec, should use request parameters likeGET.)
So in the example code, the following will revert to the original behavior:
<script>
htmx.config.methodsThatUseUrlParams = ["get"];
</script>
<form>tag, does that change things? – Tim Roberts Commented Jan 20 at 0:24