In one of my pages I have a select element and a form. What I want to achieve is to update the field values in the form when the select changes, which happens successfully. I did many tests and read the documentation on htmx.org several times until I got this, but even now I don't understand why my configuration works. Is it a bug? It is correct? I'm not sure at all, especially when I get the same good result with both hx-target="#title,#slug,#shortcode" and hx-target="#shortcode", the main one being at least one of the three target ids to be included in the hx-target, otherwise the select is removed when the form fields are replaced. What do you think?
<select id="select-settings" name="select-settings"
hx-get="/get-settings" hx-target="#title,#slug,#shortcode">
<option value="">-- Select Settings --</option>
<option value="super-opt10ns">Dolor qui voluptatem</option>
</select>
<!-- The form here is very simplified to reduce the space, but in
reality the fields are included in a table inside the form, with a
few small paragraphs of text in between, that I wouldn't want to
repeat in the responce from the end-point. -->
<form id="field-form" action="options.php" method="post">
<input type="text" id="title" name="title" value="">
<input type="text" id="slug" name="slug" value="">
<input type="text" id="shortcode" name="shortcode" value="">
</form>
Response from the /get-settings endpoint:
<input type="text" hx-swap-oob="outerHTML:#title" id="title"
name="title" value="Dolor qui voluptatem">
<input type="text" hx-swap-oob="outerHTML:#slug" id="slug"
name="slug" value="super-opt10ns">
<input type="text" hx-swap-oob="outerHTML:#shortcode" id="shortcode"
name="shortcode" value="[form slug='test']">
A cleaner solution was to add the hx-get="/get-settings" hx-trigger="change from:#select-settings" to the one of the target input fields in the form. The hx-swap-oob from the end-point response does the rest of the work. The htmx attributes from the select element I removed fully. As I understand it, the hx-target was only needed there to redirect the end-point response to the correct targets. In the modified input field it is not necessary.
It is worth mentioning that adding the hx-get="/get-settings" hx-trigger="change from:#select-settings" to the form tag in my case did not produced any response from the end-point, even with the hx-target added as for the select.
<select id="select-settings" name="select-settings">
<option value="">-- Select Settings --</option>
<option value="super-opt10ns">Dolor qui voluptatem</option>
</select>
<!-- The form here is very simplified to reduce the space, but in
reality the fields are included in a table inside the form, with a
few small paragraphs of text in between, that I wouldn't want to
repeat in the responce from the end-point. -->
<form id="field-form" action="options.php" method="post">
<input
hx-get="/get-settings"
hx-trigger="change from:#select-settings"
type="text" id="title" name="title" value="">
<input type="text" id="slug" name="slug" value="">
<input type="text" id="shortcode" name="shortcode" value="">
</form>
Response from the /get-settings endpoint:
<input type="text" hx-swap-oob="outerHTML:#title" id="title"
name="title" value="Dolor qui voluptatem">
<input type="text" hx-swap-oob="outerHTML:#slug" id="slug"
name="slug" value="super-opt10ns">
<input type="text" hx-swap-oob="outerHTML:#shortcode" id="shortcode"
name="shortcode" value="[form slug='test']">
P.S. In the end, however, I opted for another solution.