Allow `this` to be used in hx-trigger

[fifonik]

Feature request:

I'd like the form is submitted on some events on its children. I can do this right now as:

<form id="form1" hx-post="/test?1" hx-swap="none" hx-trigger="change from:#form1 input">
	<input type="checkbox" name="p_checkbox" id="checkbox_1" value="1" /><label for="checkbox_1"> One</label>
	<input type="checkbox" name="p_checkbox" id="checkbox_2" value="2" /><label for="checkbox_2"> Two</label>
</form>

<form id="form2" hx-post="/test?2" hx-swap="none" hx-trigger="change from:#form2 input">
	<input type="checkbox" name="p_checkbox" id="checkbox_3" value="3" /><label for="checkbox_3"> Three</label>
	<input type="checkbox" name="p_checkbox" id="checkbox_4" value="4" /><label for="checkbox_4"> Four</label>
</form>

However, I do not like the idea that I have to introduce and use the form IDs just for mentioning elements inside the form (this is making the automatically generated content of such forms harder to read) So, I'd prefer something simpler, for example: change from:this input -- where this is used for mentioning the element itself as in hx-target. Another option that I think should be fine: change from:findAll input

Thanks.

P.S. The change from:find input does not work as it only assign event listener to single input (the first checkbox in the above example). P.P.S. The change from:closest (form input) does not work as well and I do not understand why as based on ur manual closest should match itself.

[MichaelWest22]

see #1597 that has some ideas on the topic.

One thing to note for your example is that only inputs, selects and textAreas can emit change events so it is often much simpler just to listen for change event on its own with no from: etc and this will often do exactly what you want because of how event bubbling works.

[fifonik]

Thanks for pointing to existing issue, I left my feedback there.

Not really sure what you suggesting as the following is not triggering form's post (with all its elements) as I need for obvious reason:

<form id="form3" hx-post="/test?3" hx-swap="none">
	<input type="checkbox" name="p_checkbox" id="checkbox_5" value="5" hx-trigger="change"/><label for="checkbox_5"> Five</label>
	<input type="checkbox" name="p_checkbox" id="checkbox_6" value="6" hx-trigger="change"/><label for="checkbox_6"> Six</label>
</form>

[MichaelWest22]

<form id="form3" hx-post="/test?3" hx-swap="none" hx-trigger="change">
	<input type="checkbox" name="p_checkbox" id="checkbox_5" value="5"/><label for="checkbox_5"> Five</label>
	<input type="checkbox" name="p_checkbox" id="checkbox_6" value="6"/><label for="checkbox_6"> Six</label>
</form>

event bubbling means all the triggers ideally should be in the form. you can use things like hx-trigger="submit, change delay:500ms" and many other options. The "input" event is often one of the best ones as it fires every time an input changes.

see https://codepen.io/MichaelWest22/pen/bNGoMEL for some examples of form triggers and their impacts

[fifonik]

Nice, I have not tried this.

Unfortunately, looks like I cannot use it in all my cases as for different form fields I need different trigger options. For example, I cannot use 'changed' for checkbox/radio (hx-post not triggered). Also, I'd like to have different delay values for input/textarea (500ms or higher) and radio/checkbox/select (300ms or lower)

[MichaelWest22]

<form id="form3" hx-post="/test?3" hx-swap="none" hx-trigger="submit,input[target.type !== 'checkbox'] changed delay:500ms,change[target.type === 'checkbox'] delay:300ms">
	<input type="checkbox" name="p_checkbox" id="checkbox_5" value="5"/><label for="checkbox_5"> Five</label>
	<input type="checkbox" name="p_checkbox" id="checkbox_6" value="6"/><label for="checkbox_6"> Six</label> 
  <input name="textone">
</form>

Using things like event filters allows you to have a lot of customization