Атрибут hx-include

Атрибут hx-include позволяет вам включать дополнительные значения элементов в AJAX-запрос. Значение этого атрибута может быть:

CSS-селектором элементов, которые нужно включить.
this, который будет включать потомков элемента.
closest <CSS селектор>, который найдет ближайший родительский элемент или сам элемент, который соответствует заданному CSS-селектору (например, closest tr будет нацеливаться на ближайшую строку таблицы к элементу).
find <CSS селектор>, который найдет первый дочерний элемент, соответствующий заданному CSS-селектору.
next <CSS селектор>, который будет сканировать DOM вперёд для первого элемента, соответствующего заданному CSS-селектору (например, next .error будет нацеливаться на ближайший следующий элемент-сосед с классом error).
previous <CSS селектор>, который будет сканировать DOM назад для первого элемента, соответствующего заданному CSS-селектору (например, previous .error будет нацеливаться на ближайший предыдущий элемент-сосед с классом error).

Вот пример, который включает отдельное значение ввода:

<div>
  <button hx-post="/register" hx-include="[name='email']">
    Регистрация!
  </button>
  Введите имейл: <input name="email" type="email"/>
</div>

Это немного искусственно, так как обычно вы бы заключили оба этих элемента в form и автоматически отправили значение, но это демонстрирует концепцию.

Обратите внимание, что если вы включаете неэлемент ввода, все элементы ввода, заключенные в этот элемент, будут включены.

Примечания

hx-include наследуется и может быть размещён на родительском элементе.
Хотя hx-include наследуется, он вычисляется от элемента, который инициирует запрос. Легко запутаться при работе с расширенными селекторами, такими как find и closest.
```
<div hx-include="find input">
  <button hx-post="/register">
    Регистрация!
  </button>
  Введите имейл: <input name="email" type="email"/>
</div>
```
В приведённом выше примере, при нажатии на кнопку, селектор find input разрешается от самой кнопки, которая не возвращает никакой элемент, так как у кнопки нет дочернего элемента input, в результате чего возникает ошибка.
Стандартный CSS-селектор разрешается в document.querySelectorAll и будет включать несколько элементов, в то время как расширенные селекторы, такие как find или next, возвращают не более одного элемента для включения.