hx-include

Thehx-include attribute allows you to include additional element values in an AJAX request. The value of thisattribute can be:

• A CSS query selector of the elements to include.
• this which will include the descendants of the element.
• closest <CSS selector> which will find theclosestancestor element or itself, that matches the given CSS selector(e.g.closest tr will 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 .error will target the closest following sibling element witherror class)
• previous <CSS selector> which will scan the DOM backwards for the first element that matches the given CSS selector.(e.g.previous .error will target the closest previous sibling witherror class)

Here is an example that includes a separate input value:

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

This is a little contrived as you would typically enclose both of these elements in aform and submitthe value automatically, but it demonstrates the concept.

Note that you can also use theinherit keyword to inherit parent values for inclusion and add additional values:

<mainhx-include="#hidden-input">    ...    <buttonhx-post="/example"hx-include="inherit, [name='email']">        Post It!    </button>    Enter email: <inputname="email"type="email"/></main>

Finally, note that if you include a non-input element, all input elements enclosed in that element will be included.

Notes

• hx-include is inherited and can be placed on a parent element
• Whilehx-include is inherited, it is evaluated from the element triggering the request. It is easy to get confusedwhen working with the extended selectors such asfind andclosest.

  <divhx-include="find input">    <buttonhx-post="/register">        Register!    </button>    Enter email: <inputname="email"type="email"/></div>

  In the above example, when clicking on the button, thefind input selector is resolved from the button itself, whichdoes not return any element here, since the button doesn’t have anyinput child, thus in this case, raises an error.
• A standard CSS selector resolvestodocument.querySelectorAll and will includemultiple elements, while the extended selectors such asfind ornext only return a single element at most toinclude
• hx-include will ignore disabled inputs