CODEWITHSUNDEEP
htmx
dharmatech
dharmatech

Reputation: 9497

Data passed via URL instead of via form data

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:

enter image description here

and click Delete Selected Contacts, DevTools shows that the contact values are sent via form data:

enter image description here

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:

enter image description here

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?

Upvotes: 1

Views: 33

Answers (1)

dharmatech
dharmatech

Reputation: 9497

The migration guide:

https://htmx.org/migration-guide-htmx-1/

mentions this.

If you want DELETE requests to use a form-encoded body rather than parameters, revert htmx.config.methodsThatUseUrlParams to ["get"] (it’s a little crazy, but DELETE, according to the spec, should use request parameters like GET.)

So in the example code, the following will revert to the original behavior:

    <script>

        htmx.config.methodsThatUseUrlParams = ["get"];

    </script>

Upvotes: 1

Related Questions