bigskysoftware / bigskysoftware/htmx
Allow `hx-include` and `hx-vals` to specify an HTTP method explicitly
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
**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:
```html
Submit
Category 1
Category 2
```
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.
Contributor guide
Assessment
This issue has not been assessed yet.