htmx Tutorial · Making Requests · Lesson 9 of 30
Sending Values: hx-include, hx-vals and hx-params
Send values from other inputs, add extra values, and filter which values are sent.
Values that are sent automatically
As you saw on the requests page: an input sends its own value, a form sends all its fields, and a non-GET request from inside a form sends the form's fields.
hx-include: values from other elements
hx-include takes a CSS selector (or closest form, this, find ...) and adds those inputs' values:
<input id="qty" name="qty" type="number" value="2" min="1">
<button hx-post="/cart" hx-include="#qty" hx-vals='{"product": "tea-mug"}' hx-target="#cart">Add to cart</button>
<p id="cart"></p>
<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
server.post("/cart", (req) => `Added ${server.escape(req.body.qty)} × ${server.escape(req.body.product)}.`);
</script>
hx-vals: extra values
hx-vals adds values written as JSON:
<button hx-post="/vote" hx-vals='{"choice": "yes", "poll": 7}'>Yes</button>
Use single quotes around the attribute so the JSON can use double quotes.
hx-params: filter the values
hx-params="*" (all, the default), none, not secret (all except secret), or email, name (only those).
<form hx-post="/signup" hx-params="not password_confirm" hx-target="#got">
<input name="email" value="[email protected]">
<input name="password" type="password" value="secret1">
<input name="password_confirm" type="password" value="secret1">
<button>Sign up</button>
</form>
<p id="got"></p>
<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
server.post("/signup", (req) => "The server received: " + server.escape(Object.keys(req.body).join(", ")));
</script>
Test yourself
How do you send the value of an input that is outside the element making the request?
Use hx-include with a selector for that inputCopy it into hx-vals with JavaScriptIt's sent automaticallyWrap the whole page in a form
Show answer
Answer: Use hx-include with a selector for that input
hx-include adds the values of the elements its selector matches.