How can I grab a query string value and apply it on load?

[cbmeeks]

I have an input box. What I would like to do is set the value of it on page load from the URL query parameter.

For example, in JS I would do this:

const input = document.getElementById('myInput')
input.value = new URLSearchParams(window.location.search).get('myQueryParam')

However, I can't seem to figure out how to do this in HTMX and/or Hyperscript.

Any ideas how I can do this?

Thanks!

[WedersonCD]

You could do something like this:
<input type="text" _=" init js return new URLSearchParams(window.location.search).get('parameter') end set @value to result end "/>

[cbmeeks]

Oh my word I looked forever and couldn't find that.

Good news is that I almost had that myself but messed up the "set @value to result" part..

Thanks!!!

[cbmeeks]

It seems this doesn't work with a select box.

                    <select class="w-80" id="documentStandard" name="documentStandard"
                            aria-label="Document Standard"
                            th:hx-get="|@{/document-types/standards}|"
                            hx-trigger="change"
                            hx-target="#dt-list"
                            hx-swap="innerHTML"
                            _="init js return new URLSearchParams(window.location.search).get('documentStandard') end set @value to result end" >
                        <option value=""></option>
                        <option value="EDIFACT">EDIFACT</option>
                        <option value="X12">X12</option>
                    </select>

I can log the "value" and it works. I'm thinking there is some sort of race condition. Also, I have another select box that does the same thing but the "options" are the result of a slow hx-get query.

Any tips on this one?

Thanks

[WedersonCD]

you didn't control the default select option using the value property.

You can use the selected property into the option.

` <select class="w-80" id="documentStandard" name="documentStandard"
aria-label="Document Standard"
hx-get="|@{/document-types/standards}|"
hx-trigger="change"
hx-target="#dt-list"
hx-swap="innerHTML"
_="init
js
return new URLSearchParams(window.location.search).get('documentStandard')
end
set defaultValue to result
add @selected to <option[value='${defaultValue}']/>

end" >

EDIFACT
X12
`

[cbmeeks]

Oh, cool. Thanks.

I also discovered this works but not sure how/why.

_="init js return new URLSearchParams(window.location.search).get('documentStandard') end set <select[name='documentStandard']/>'s value to result end"