Html Question posted in
Some basic documentation can be found here.

Html – HTMX get request within form includes select element name attribute in query string. Is there a way to avoid that?

Using Go html/templates, HTMX, Alpinejs
What i’m trying to accomplish is that when I select server name from a dropdown list I populate the database dropdown list with databases related to that instance. Using HTMX to get that database list the select element attribute name is added to the query string.
/getDatabases?database-name=&serverName=xxxxxx

Here is the code

<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>

This code block is within a <form>

If I remove the name attribute than of course the query parameter is not added and I can not get the form value in my handler.
databaseName := c.FormValue("database-name")

When submitting the form i need to get what is selected for the database name so i can not remove that I just don’t want to have this in my query when I get the list of databases.

Probably just some basic HTMX functionality, just not finding it in the documentation

Here is the full form. Requested in comment.

<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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks guys ( @mariodev @Gimby ). This is much cleaner this way. Moving the hx-get to the server-instance part also enables that I don't need to have a custom event to trigger pulling the database list. Just listen to change event within the select element.

    Here is the form after changes:

    <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>

  2. 0

    This is the expected behaviour with a GET request, it will append form-enclosed input elements (with a name attribute) as query parameters. To avoid this, you could use a POST request instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search