hx-include

Синтаксис

<button hx-post="/register" hx-include="[name='email']">Register</button>

Значением этого атрибута может быть:

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

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

<div>
    <button hx-post="/register" hx-include="[name='email']">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

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

Обратите внимание, что можно использовать модификатор :append, чтобы наследовать родительские значения для включения и добавлять дополнительные значения (родительский элемент должен предоставлять своё значение с помощью :inherited):

<main hx-include:inherited="#hidden-input">
    ...
    <button hx-post="/example" hx-include:append="[name='email']">
        Post It!
    </button>
    Enter email: <input name="email" type="email"/>
</main>

Наконец, обратите внимание: если включить элемент, не являющийся полем ввода, будут включены все поля ввода, находящиеся внутри него.

Примечания

при работе с расширенными селекторами, такими как find и closest.

<div hx-include:inherited="find input">
    <button hx-post="/register">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

В приведённом выше примере при нажатии кнопки селектор find input разрешается относительно самой кнопки. Здесь он не возвращает ни одного элемента, поскольку у кнопки нет дочернего элемента input, поэтому в этом случае возникает ошибка.

• Стандартный CSS-селектор разрешается с помощью document.querySelectorAll и может включать несколько элементов, тогда как расширенные селекторы, такие как find или next, возвращают не более одного элемента для включения.
• hx-include игнорирует отключённые поля ввода.