[bug] hx-boost: form with get method keeps appending param in the URL #1788

resmo · 2023-09-11T16:27:39Z

Summary

Given a form with method GET to implement a search with a param named query.

After submit the form, the param is appended to the URL. This is fine, but after each form submit the query param keeps getting appended in the URL resulting in multiple identical params appended.

Version

Version 1.9.5 (not tested in previous versions)

Reproducer

Given a simple form (search form) with method GET:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/htmx.org@1.9.5"
        integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
        crossorigin="anonymous"></script>
</head>

<body hx-boost="true">
    <form method="get">
        search <input type="text" name="query">
    </form>
</body>

</html>

Without hx-boost URL is becomes ?query=<query1>

With hx-boost, the query keeps getting appended after every form submit resulting in: ?query=test&query=test ...

Expected

I would have expected the query not to be appended, it should honor the form action resulting in always one query=<query>

The text was updated successfully, but these errors were encountered:

resmo · 2023-09-11T16:33:40Z

related #485 , hx-push-url="false" is a workaround for me, but I still think the appending of a param multiple times is a bug.

alexpetros · 2023-09-19T20:35:55Z

Yup, I think that's a bug too. We'll get this prioritized.

andycnguyen · 2024-03-10T20:14:37Z

I've encountered this too. I was wondering why my get-form broke when I added Htmx, and it seems to be because appending to the query string (instead of replacing it) results in multiple, often inconsistent specifications of the same variables in the Url.

brox · 2024-07-10T12:27:25Z

I had the same problem but changing from hx-get="" to hx-get="/" fixed it for me. Seems like an empty or implicit URL causes this.

feelixe · 2024-09-12T12:42:14Z

Is there a plan to fix this issue? I would love to help, but I saw the PR that already tried to fix this was closed.

resmo · 2024-09-12T13:04:13Z

Is there a plan to fix this issue? I would love to help, but I saw the PR that already tried to fix this was closed.

have you tried the non-empty URL e.g. hx-get="/" workaround?

feelixe · 2024-09-12T16:43:59Z

I'm using hx-boost on the body element so it applies to everything.
Thanks for the tip, but I tried with hx-get="/" and then it does not update the url in the browser, and it's not pushing to history so you can step backwards, which makes it kinda unusable for me.

taronull · 2024-09-17T15:49:06Z

Not sure this helps but having action="/" prevents the issue

mbarzeev · 2024-10-06T07:58:09Z

Hi,
Had this issue as well - a link tag with a href that has query params to is and hx-boost="true" keeps on appending the query params to the URL, and yes, you want the push URL cause you want the native history and all that.
Seems like a critical bug for hx-boost.

boosted forms that issue a `GET` (and only a `GET`) and have no `action` attribute or an empty `action` attribute should clear the existing parameters of the current path when submitting lmao

1cg · 2024-12-11T23:43:36Z

will be fixed in the next release of htmx, sorry for such a long-lived bug

provinzkraut · 2025-01-27T13:36:15Z

I'm still experiencing this behaviour when using hx-get="" on 2.0.4, which supposedly included the fix.

geoffrey-eisenbarth · 2025-01-27T21:31:10Z

@provinzkraut I believe that when you use hx-get="" you're telling HTMX to take the current URL (which will possibly contain existing URL params if the form was already submitted once) and append the form's current params to the URL, which is why this is happening. If you specify the endpoint in your HTML instead of an empty string, it should behave like you want.

provinzkraut · 2025-01-28T09:17:17Z

you're telling HTMX [...] and append the form's current params to the URL
While this is what's happening, I'm not sure that's what I'm telling HTMX. At least it's not what I'm intending to tell it to do.

If you specify the endpoint in your HTML instead of an empty string, it should behave like you want.

True, but the thing is, that requires way more work on my end and, at least to me, a bit unexpected.

Do you think there is a way to support mutating query parameters instead of always appending? This sounds like a very useful feature to me.

geoffrey-eisenbarth · 2025-01-28T12:33:35Z

I believe you can do <form hx-boost=true hx-target="foo"> with implied (or specified) method=get and action="".

geoffrey-eisenbarth · 2025-01-28T16:01:05Z

Another alternative is to not use hx-push-url and just use <form hx-get="">.

resmo changed the title ~~hx-boost: form with get method keeps appending param in the URL~~ [bug] hx-boost: form with get method keeps appending param in the URL Sep 11, 2023

Rounak-stha added a commit to Rounak-stha/htmx that referenced this issue Sep 19, 2023

bigskysoftware#1788 Fix URL Params Appending on Boost

b7601a2

Rounak-stha mentioned this issue Sep 19, 2023

Fix URL Params Appending on Boost #1811

Closed

alexpetros added the bug Something isn't working label Sep 19, 2023

alexpetros linked a pull request Sep 19, 2023 that will close this issue

Fix URL Params Appending on Boost #1811

Closed

NDoolan360 mentioned this issue Aug 7, 2024

Better graceful degradation of boosted form element #2802

Merged

4 tasks

1cg added a commit that referenced this issue Dec 11, 2024

fix #1788

232667d

boosted forms that issue a `GET` (and only a `GET`) and have no `action` attribute or an empty `action` attribute should clear the existing parameters of the current path when submitting lmao

1cg closed this as completed Dec 11, 2024

geoffrey-eisenbarth mentioned this issue Feb 20, 2025

hx-params is ignored if included inside a form element #3199

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[bug] hx-boost: form with get method keeps appending param in the URL #1788

[bug] hx-boost: form with get method keeps appending param in the URL #1788

resmo commented Sep 11, 2023 •

edited

Loading

resmo commented Sep 11, 2023 •

edited

Loading

alexpetros commented Sep 19, 2023

andycnguyen commented Mar 10, 2024 •

edited

Loading

brox commented Jul 10, 2024

feelixe commented Sep 12, 2024

resmo commented Sep 12, 2024

feelixe commented Sep 12, 2024 •

edited

Loading

taronull commented Sep 17, 2024

mbarzeev commented Oct 6, 2024 •

edited

Loading

1cg commented Dec 11, 2024

provinzkraut commented Jan 27, 2025 •

edited

Loading

geoffrey-eisenbarth commented Jan 27, 2025

provinzkraut commented Jan 28, 2025

geoffrey-eisenbarth commented Jan 28, 2025 •

edited

Loading

geoffrey-eisenbarth commented Jan 28, 2025

[bug] hx-boost: form with get method keeps appending param in the URL #1788

[bug] hx-boost: form with get method keeps appending param in the URL #1788

Comments

resmo commented Sep 11, 2023 • edited Loading

Summary

Version

Reproducer

Expected

resmo commented Sep 11, 2023 • edited Loading

alexpetros commented Sep 19, 2023

andycnguyen commented Mar 10, 2024 • edited Loading

brox commented Jul 10, 2024

feelixe commented Sep 12, 2024

resmo commented Sep 12, 2024

feelixe commented Sep 12, 2024 • edited Loading

taronull commented Sep 17, 2024

mbarzeev commented Oct 6, 2024 • edited Loading

1cg commented Dec 11, 2024

provinzkraut commented Jan 27, 2025 • edited Loading

geoffrey-eisenbarth commented Jan 27, 2025

provinzkraut commented Jan 28, 2025

geoffrey-eisenbarth commented Jan 28, 2025 • edited Loading

geoffrey-eisenbarth commented Jan 28, 2025

resmo commented Sep 11, 2023 •

edited

Loading

resmo commented Sep 11, 2023 •

edited

Loading

andycnguyen commented Mar 10, 2024 •

edited

Loading

feelixe commented Sep 12, 2024 •

edited

Loading

mbarzeev commented Oct 6, 2024 •

edited

Loading

provinzkraut commented Jan 27, 2025 •

edited

Loading

geoffrey-eisenbarth commented Jan 28, 2025 •

edited

Loading