Please review.Usage of hx-get with specific params #3222

kharabela · 2025-03-06T02:40:59Z

kharabela
Mar 6, 2025

Sample Code

 <select  id="MailCountry"
              name="MailCountry"
              hx-get="/getStates" hx-target="#MailState" hx-swap="innerHTML" 
              onchange="validateCountry(this)"
              onblur="validateAccountForm(this);">
              <option value="" disabled selected>Choose Country</option>
              {{range .countries}}
             <option value="{{.Code}}">{{.Name}}</option>
              {{end}}
 </select>

Currently get is including all form data.While it works

Need request only in the below format
/getStates?&mailcountry=US

1.Tried & Failed.Works however sends data again, sending entire form data.

hx-get="/getStates" hx-target="#MailState" hx-swap="innerHTML" hx-vals='js:{mailcountry: document.getElementById("MailCountry").value}'
Log says-"/getStates?MailCountry=US&mailcountry=US&sal=&firstname=FName&middlename=&lastname=&SSN=&DOB=&mailaddr1=%20Main%20St&mailaddr2=&mailcity=Columbia&mailstate=&mailzip=&mailcounty=&sameasmail=on&billaddr1=&billaddr2=&billcity=&billcountry=&billstate=&billzip=&billcounty="

2.Tried & Failed.Not working at all.
hx-get="/getStates" hx-target="#MailState" hx-swap="innerHTML" hx-params="MailCountry"
Log says -/getStates?MailCountry=US
Am I doing something wrong?

Telroshan · 2025-03-06T07:32:38Z

Telroshan
Mar 6, 2025
Collaborator

Hey, this sounds weird indeed

We do have an automatic inclusion of the parent form data for any non-GET request as you can see in this snippet:

htmx/src/htmx.js

Lines 3524 to 3527 in 07d3518

    
           // for a non-GET include the closest form 
        
           if (verb !== 'get') { 
        
             processInputValue(processed, priorityFormData, errors, closest(elt, 'form'), validate) 
        
           }

But since you're precisely doing a GET request, this shouldn't happen at all.

By any chance, do you have any hx-include defined on any ancestor of that select ? As this one is inherited, if you have it defined on a parent node, then the input would also apply it

2 replies

kharabela Mar 6, 2025
Author

My sample code @Telroshan shortened for brevity

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="AccountDetailsForm"
hx-vals='js:{
          mailcountry: document.getElementById("MailCountry").value,
          mailstate: document.getElementById("MailState").value            
          }'
 hx-swap="none">
            <label for="MailCountry">Country</label>          
                <select id="MailCountry"
                        name="MailCountry"
                        hx-get="/getStates" hx-target="#MailState" hx-swap="innerHTML">
                    <option value="" disabled selected>Choose Country</option>
                    {{range .countries}}
                    <option value="{{.Code}}">{{.Name}}</option>
                    {{end}}
                </select>               
             <label  for="MailState">State </label>            
                <select id="MailState"
                        name="MailState"                       
                        onchange="validateState(this)"
                        onblur="validateAccountForm(this);">                   
                </select>
        <button id="AccountSubmit"
                type="submit"                  
                onmouseover="check();"
                hx-post="/accountformdata" >
            Save
        </button>
</form>
</body>
</html>

kharabela Mar 7, 2025
Author

@Telroshan I fixed it by removing hx-vals and using hx-include during post

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please review.Usage of hx-get with specific params #3222

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Please review.Usage of hx-get with specific params #3222

kharabela Mar 6, 2025

Replies: 1 comment · 2 replies

Telroshan Mar 6, 2025 Collaborator

kharabela Mar 6, 2025 Author

kharabela Mar 7, 2025 Author

kharabela
Mar 6, 2025

Replies: 1 comment 2 replies

Telroshan
Mar 6, 2025
Collaborator

kharabela Mar 6, 2025
Author

kharabela Mar 7, 2025
Author