Can I keep track of what elements got clicked with alpine or htmx?

Question

Look at this website, and on the left under "What dates might work?" you see a bunch of boxes selected, is it possible to keep track of what are selected and send them in a http post request or is it better to use javascript?

Answer 1

Assuming you want to save the selected dates on the backend, I would suggest to use HTMX with the delay trigger modifier. A very simple example:

<form hx-post="date-save-endpoint" hx-trigger="change delay:2s">
    <input type="checkbox" name="dates" value="2022-04-01"> 2022-04-01
    <input type="checkbox" name="dates" value="2022-04-02"> 2022-04-02
    <input type="checkbox" name="dates" value="2022-04-03"> 2022-04-03
</form>

Here we have 2s delay, so HTMX will wait 2s for additional user inputs before sending a post request. Of course you can fine tune the delay to prevent some unnecessary requests.