FORM submission - apply delay to INPUT text and no delay for checkboxes

[rcorsari]

Hello

I can't get rid of applying a delay to the following form submission. My aim is to AVOID the POST event until the user finishes to type. But if he clicks one of the chekboxes the POST event should fire instantly

Can you help with this? Thank you

<form id="search-form"
      hx-post="<?= site_url('admin/trova') ?>"
      hx-trigger="input from:#search-form"
      hx-target="#search-results" 
      hx-indicator=".htmx-indicator">

    <input class="form-control" type="search" name="search" placeholder="Digitare almeno 3 caratteri..." hx-trigger="keyup changed delay:500ms, search">
    <input type="checkbox" name="aperto" value="0" <?= isset($_POST['aperto']) && $_POST['aperto'] == 0 ? 'checked' : '' ?> >
    <input type="checkbox" name="nuovaRisp" value="-1" <?= isset($_POST['nuovaRisp']) && $_POST['nuovaRisp'] == -1 ? 'checked' : '' ?> >
</form>

[andryyy]

Perhaps I’m getting it wrong, but:

You can add a trigger like "click from:[type='checkbox']" to the form for an instant search. Perhaps a "blur" from the search input is something you’d also like to checkout. It would fire as soon as you leave the search input field.

[Telroshan]

Would the following meet your needs?

<form id="search-form"
      hx-post="/echo/json"
      hx-trigger="input delay:500ms from:#search-form, input from:[type='checkbox']"
      hx-target="#search-results" 
      hx-indicator=".htmx-indicator">

    <input class="form-control" type="search" name="search" placeholder="Digitare almeno 3 caratteri...">
    <input type="checkbox" name="aperto" value="0">
    <input type="checkbox" name="nuovaRisp" value="-1">
</form>

You can play it on this JSFiddle, on which I just added the htmx demo script and dummy elements / URLs to make it work

Quick notes about it:

• The delay specifier lets you reset the timer every time the input event fires. That is, everytime you hit a key in the search input, the timer is reset. In the example above, I've specified a 500ms so you would have to wait for half a second after your last key stroke before the POST gets submitted. Ofc, feel free to tweak that delay to your needs :)
• input from:[type='checkbox'] on the other hand, instructs htmx to fire the POST event as soon as any input event happens on checkboxes, so ticking a checkbox instantly fires the POST request
• I have removed the hx-trigger and hx-delay (the latter doesn't seem to exist btw?) attributes you had put on the search input, as they were of no use

[rcorsari]

Thank you Telroshan, perfect

which is the part of the HTMX documentation that tells about these long setups and possibilities? Thank you

I mean this long chain

hx-trigger="input delay:500ms from:#search-form, input from:[type='checkbox']"

Thank you for the help and for the fact I have learnt something new

One kind clarification though please:

hx-trigger="input delay:500ms from:#search-form, input from:[type='checkbox']"

this from:#search-form , does it propagate to all the targets or from:[type='checkbox'] would/will target in a generic way any eventual checkbox in the same document? Thank you

[Telroshan]

Np, glad to help :) You may find info about chaining events in the hx-include documentation, in the Multiple Triggers section, where it says

Multiple triggers can be provided, seprarated by commas. Each trigger gets its own options. <div hx-get="/news" hx-trigger="load, click delay:1s"></div> This example will load /news immediate on the page load, and then again with a delay of one second after each click.

You're right, from:[type='checkbox'] would grab all the checkboxes on the page, you can adjust the CSS selector to only target elements in the form, such as

hx-trigger="input delay:500ms from:#search-form>[type='search'], input from:#search-form>[type='checkbox']"

You can play it on this JSFiddle, notice how the checkbox that it outside doesn't trigger any request while the checkboxes inside the form still do

Here, I'm using the CSS child combinator syntax to only target inputs that are children of the form, also differentiating search inputs from checkboxes

[alexpetros]

Looks like this is resolved!