Allow `hx-include` and `hx-vals` to specify an HTTP method explicitly

[sgordon16]

Description:

Currently, hx-include and hx-vals always include data in the same HTTP method as the primary request (hx-get, hx-post, etc.). However, there are cases where developers may need to include specific data as query parameters while making a POST request, or vice versa. This lack of flexibility often requires workarounds such as manually constructing URLs or modifying requests with JavaScript.

Feature Request

Introduce a way to specify the HTTP method explicitly for hx-include and hx-vals. This would allow certain values to be included in the query string (GET) while keeping others in the request body (POST).

Proposed Syntax:

1. Explicit HTTP method modifier
   • hx-include="#filters get" → Includes #filters fields as query parameters.
   • hx-include="#extra post" → Ensures #extra fields are included in the request body.
   • hx-vals="{ key: 'value' } get" → Appends key=value as a query parameter.
   • hx-vals="{ extra: '123' } post" → Sends extra=123 in the request body.

Expected Behavior

With hx-include="#filters get" and hx-vals="{ key: 'value' } get", an hx-post request would be transformed into:

POST /update?search=abc&category=1&key=value
Content-Type: application/x-www-form-urlencoded

name=John

Use Case

A common scenario where this is useful is when updating a table’s data while maintaining filter parameters in the URL. For example:

<form hx-post="/update" hx-include="#filters get" hx-vals="{ key: 'value' } get">
  <input type="text" name="name" value="John">
  <button type="submit">Submit</button>
</form>

<div id="filters">
  <input type="text" name="search" value="abc">
  <select name="category">
    <option value="1" selected>Category 1</option>
    <option value="2">Category 2</option>
  </select>
</div>

Here, name=John is sent in the request body, while search=abc, category=1, and key=value are included in the query string. This makes it possible to refresh the table with updated data while preserving filter state without requiring JavaScript workarounds.

[markgarrigan]

Also... Instead of the hx-include="#filters get". You could move the method to the value definition. In theory, that would give even greater flexibility.

<form hx-post="/update" hx-include="#filters" hx-vals="{ key: 'value' } get">
  <input type="text" name="name" value="John">
  <button type="submit">Submit</button>
</form>

<div id="filters">
  <input type="hidden" name="id" value="123" hx-val="post">
  <input type="text" name="search" value="abc" hx-val="get">
  <select name="category" hx-val="get">
    <option value="1" selected>Category 1</option>
    <option value="2">Category 2</option>
  </select>
</div>

[Telroshan]

Hey, while I understand the usecase, I think we would welcome this as a community extension rather than a new feature in the core library. See the essay the future of htmx as well as our contribution guidelines for more details on the current philosophy of htmx development This new feature would add yet another mini-syntax inside attributes, while hx-include already supports the extended selectors syntax btw for which we already do some parsing on its value. We wish to avoid adding more of that to the lib as it greatly complixifies such features and makes the lib heavier for a not-so-common usecase.

A new extension would perfectly fit here I think, letting you enable that extra behavior if you need it without making the core lib heavier, see our extensions guidelines to get started! You would be free to implement this however you want since it'd be a community extension (i.e. not hosted on the htmx "official" repos), you could for example add new adjacent attributes to specify the method (and if the attribute isn't set, let the default hx-include/hx-vals behavior occur), just an idea out loud though

[sgordon16]

Thank you for your response. I will look into it.