hx-vals

Синтаксис

<div hx-get="/search" hx-vals='{"category": "books"}'>
  Search
</div>

JSON-объект

Укажите JSON-объект напрямую:

<button hx-post="/api/user" hx-vals='{"role": "admin", "active": true}'>
  Create Admin
</button>

Выражение JavaScript

Используйте префикс js: для вычисления JavaScript-кода:

<div hx-get="/search" hx-vals='js:{query: document.querySelector("#search").value}'>
  Search
</div>

Предупреждение системы безопасности: При использовании префикса js: учитывайте связанные с этим риски для безопасности, особенно при работе с пользовательским вводом, например строками запроса или пользовательским содержимым, которое может привести к уязвимости межсайтового скриптинга (XSS).

Модификатор :append

По умолчанию объявление hx-vals дочернего элемента полностью заменяет значение родительского элемента для всех совпадающих ключей. Используйте модификатор :append, чтобы вместо этого объединить значения дочернего элемента со значениями родительского:

<div hx-vals:inherited='{"category": "books", "lang": "en"}'>
  <!-- Replaces parent entirely for shared keys -->
  <button hx-get="/search" hx-vals='{"category": "fiction"}'>Fiction</button>

  <!-- Merges with parent, overriding only "category" -->
  <button hx-get="/search" hx-vals:append='{"category": "fiction"}'>Fiction</button>
</div>

Наследование

Объявление hx-vals дочернего элемента полностью заменяет значение родительского элемента для всех ключей, присутствующих в обоих объявлениях. Используйте модификатор :append, чтобы объединить значения, а не заменять их.

Сравнение с hx-include

• hx-include извлекает значения из существующих элементов ввода в DOM
• hx-vals добавляет произвольные статические или вычисляемые значения, не соответствующие элементу формы

Оба атрибута можно использовать вместе: hx-include получает данные ввода, а hx-vals добавляет дополнительные параметры.

Примечания

• Значения добавляются в тело запроса (POST, PUT, PATCH, DELETE) или параметры строки запроса (GET)
• Если значение уже присутствует в форме, hx-vals заменит его
• Выражение JavaScript вычисляется во время отправки запроса
• Для асинхронного получения значений можно вернуть Promise