hx-include attribute allows you to include additional element values in an AJAX request. The value of this
attribute can be:
thiswhich will include the descendants of the element.
closest <CSS selector>which will find the closest ancestor element or itself, that matches the given CSS selector (e.g.
closest trwill target the closest table row to the element).
find <CSS selector>which will find the first child descendant element that matches the given CSS selector.
next <CSS selector>which will scan the DOM forward for the first element that matches the given CSS selector. (e.g.
next .errorwill target the closest following sibling element with
previous <CSS selector>which will scan the DOM backwards for the first element that matches the given CSS selector. (e.g
previous .errorwill target the closest previous sibling with
Here is an example that includes a separate input value:
<div> <button hx-post="/register" hx-include="[name='email']"> Register! </button> Enter email: <input name="email" type="email"/> </div>
This is a little contrived as you would typically enclose both of these elements in a
form and submit
the value automatically, but it demonstrates the concept.
Note that if you include a non-input element, all input elements enclosed in that element will be included.
hx-includeis inherited and can be placed on a parent element
hx-includeis inherited, it is evaluated from the element triggering the request. It is easy to get confused when working with the extended selectors such as
In the above example, when clicking on the button, the
<div hx-include="find input"> <button hx-post="/register"> Register! </button> Enter email: <input name="email" type="email"/> </div>
find inputselector is resolved from the button itself, which does not return any element here, since the button doesn’t have any
inputchild, thus in this case, raises an error.
nextonly return a single element at most to include