bigskysoftware / bigskysoftware/htmx

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

Open
#3,174 3 comments 0 reactions 0 assignees View on GitHub
extension
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.