bigskysoftware
when using hx-boost on my form, the value of checkboxes get lost when hitting the back button
I have a simple form I am using to test htmx. It has a few checkboxes and POST's the data to a server.
<main id="mm" class="container">
<form hx-boost="true" action="/results" method="post">
<label>
<input id="a1" type="checkbox" name="a1" />
a1
</label>
<label>
<input id="a2" type="checkbox" name="a2" />
a2
</label>
<label>
<input id="a3" type="checkbox" name="a3" />
a3
</label>
<input type="submit" value="go" />
</form>
</main>
Let's assume I check all 3 checkboxes. I then submit the form.
hx-boost does it's thing and it swaps in the response from the /results endpoint (which simply returns "hello world"). so far so good.
Now, when I hit the back button, to go back to the form with the checkboxes, all the checkboxes return to their original, unchecked states.
However, the checkbox states do get saved when I submit the FORM without boosting:
<form hx-boost="false" action="/results" method="post">
When not using boosting, and submitting the form as normal, the browser saves the checkbox state when I hit the back button. All checkboxes I check before submitting the form, are still checked when I hit the back button.
Why is boosting on my form changing the browsers default behavior of saving the checkbox state ? And how can I get my boosted form submission to save the checkbox states when hitting the back button ?
Thank you
Have you tried hx-push-url="false" ? Just a thought, not sure, honestly just spitballing
