表单中的 HTMX 获取请求包括查询字符串中的选择元素名称属性。有办法避免吗？

Question

使用Go html/模板、HTMX、Alpinejs 我想要完成的是，当我从下拉列表中选择服务器名称时，我会使用与该实例相关的数据库填充数据库下拉列表。使用 HTMX 获取数据库列表，选择元素属性名称将添加到查询字符串中。

/getDatabases?database-name=&serverName=xxxxxx

这是代码

<div>
    <label for="server-instance">Server Instance: 
        <span x-text="selectedServerInstance"></span>
    </label>
    <select id="server-instance" name="server-instance" x-model="selectedServerInstance">
        <option value="">Select a server instance</option>
        {{range .}}
        <option value="{{.ServerName}}">{{.ServerName}}</option>
        {{end}}
    </select>
</div>
<div x-cloak x-show="selectedServerInstance">
    <label for="database-name"></label>
    <select id="database-name" name="database-name" 
    hx-get="/getDatabases"
    :hx-vals="JSON.stringify({ serverName: selectedServerInstance })"
    hx-trigger="change from:#server-instance" 
    hx-target="#database-list" 
    hx-swap="outerHTML">
        <option value="">Select a database</option>
        <option id="database-list"></option>
    </select>
</div>

此代码块位于

如果我删除名称属性，当然不会添加查询参数，并且我无法在处理程序中获取表单值。

databaseName := c.FormValue("database-name")

提交表单时，我需要获取为数据库名称选择的内容，因此我无法删除它，当我获取数据库列表时，我只是不想在查询中包含此名称。

可能只是一些基本的 HTMX 功能，只是在文档中找不到它

这是完整的表格。在评论中要求。

<div x-data="{ selectedServerInstance: '' }">
    <h2>Priviledges</h2>
    <form 
    hx-post="/submitUserPriviledgesForm" 
    hx-trigger="submit" 
    hx-target="#user-priviledge-container" 
    hx-swap="innerHTML">
        <div class="mb-4">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="server-instance">Server Instance: <span x-text="selectedServerInstance"></span></label>
            <select id="server-instance" name="server-instance" 
            x-model="selectedServerInstance"
            x-on:change="document.querySelector('body').dispatchEvent(new CustomEvent('serverInstanceChanged'))" >
                <option value="">Select a server instance</option>
                {{range .}}
                <option value="{{.ServerName}}">{{.ServerName}}</option>
                {{end}}
            </select>
        </div>
        <div x-cloak x-show="selectedServerInstance">
            <label for="database-name">(Optional)</span></label>
            <select id="database-name" name="database-name" 
            hx-get="/getDatabases"
            :hx-vals="JSON.stringify({ serverName: selectedServerInstance })"
            hx-trigger="serverInstanceChanged from:body" 
            hx-target="#database-list" 
            hx-swap="outerHTML">
                <option id="database-list"></option>
            </select>
        </div>
        <div">
            <label for="skip-object-permission">Skip Object Permission:</label>
            <input type="checkbox" id="skip-object-permission" name="skip-object-permission">
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
</div>
<div>
    <div id="user-priviledge-container"></div>
</div>

谢谢大家（@mariodev @Gimby）。这样就干净多了。将 hx-get 移动到服务器实例部分还使我不需要自定义事件来触发拉取数据库列表。只需监听选择元素内的更改事件即可。

以下是更改后的表格：

<div x-data="{ selectedServerInstance: '' }">
    <h2>User Priviledges</h2>
    <form 
    hx-post="/submitUserPriviledgesForm" 
    hx-trigger="submit" 
    hx-target="#user-priviledge-container" 
    hx-swap="innerHTML">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="server-instance" class="block text-gray-700">Server Instance: <span>(Optional)</span></label>
            <select id="server-instance" name="server-instance" 
            x-model="selectedServerInstance"
            hx-get="/getDatabases"
            hx-trigger="change" 
            hx-target="#database-list-container" 
            hx-swap="innerHTML">
                <option value="">Select a server instance.</option>
                {{range .}}
                <option value="{{.ServerName}}">{{.ServerName}}</option>
                {{end}}
            </select>
        </div>
        <div x-cloak x-show="selectedServerInstance">
            <label for="database-name">Database: <span>(Optional)</span></label>
            <select id="database-list-container" name="database-name"></select>
        </div>
        <div>
            <label for="skip-object-permission">Skip Object Permission:</label>
            <input type="checkbox" id="skip-object-permission" name="skip-object-permission">
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
</div>
<div>
    <div id="user-priviledge-container"></div>
</div>

Answer 1

谢谢大家（@mariodev @Gimby）。这样就干净多了。将 hx-get 移动到服务器实例部分还使我不需要自定义事件来触发拉取数据库列表。只需监听选择元素内的更改事件即可。

以下是更改后的表格：

<div x-data="{ selectedServerInstance: '' }">
    <h2>User Priviledges</h2>
    <form 
    hx-post="/submitUserPriviledgesForm" 
    hx-trigger="submit" 
    hx-target="#user-priviledge-container" 
    hx-swap="innerHTML">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="server-instance" class="block text-gray-700">Server Instance: <span>(Optional)</span></label>
            <select id="server-instance" name="server-instance" 
            x-model="selectedServerInstance"
            hx-get="/getDatabases"
            hx-trigger="change" 
            hx-target="#database-list-container" 
            hx-swap="innerHTML">
                <option value="">Select a server instance.</option>
                {{range .}}
                <option value="{{.ServerName}}">{{.ServerName}}</option>
                {{end}}
            </select>
        </div>
        <div x-cloak x-show="selectedServerInstance">
            <label for="database-name">Database: <span>(Optional)</span></label>
            <select id="database-list-container" name="database-name"></select>
        </div>
        <div>
            <label for="skip-object-permission">Skip Object Permission:</label>
            <input type="checkbox" id="skip-object-permission" name="skip-object-permission">
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
</div>
<div>
    <div id="user-priviledge-container"></div>
</div>