How to send selected value from homepage dropdown to another page in Hugo?

support
1

I have a select dropdown on the homepage built with HTML, and it has a default value.

When a user selects an option and submits or changes the dropdown, I want to pass the selected value to another page (for example, /cars/) and use that value there.

Since Hugo is a static site generator, what is the recommended way to pass the selected dropdown value from the homepage to another page?

For now, I want to implement this using Hugo + plain HTML only.
Later, I may enhance this using Svelte, but my first attempt should not rely on any framework.

2

That’s something you’d have to do server-side. And there’s no “sending to a page”, since pages do not talk to each other.

You must store the value somewhere on the server when it is set on the homepage and have your /cars/ page have retrieve it when it loads (eg using XHR).

3

Is it possible to handle this without using the server side, and can we use routing to pass data between different pages?

4

using cookies and JS you could pass something - if that falls in “plain HTML” for you.

but if the child page should display different things based on the selected option you will have to pre render that one.

  1. store the option value in the cooky
    your child page has to have the content pre rendered and hide/show stuff based on the retrieved value

  2. store the complete text in the cookie
    your child page needs to update the HTML based on the cookie value

5

Right now, I add the selected value to the URL like this:

/cars/#selected-value

On the next page, I read this value from the URL and use it.
Is this a correct and good approach compared to the suggestions of using cookies or localStorage?

6

you are using #, so if your selected value points to a ref on the child page and that’s your goal looks ok for me.
if not something like ?key=value would be better guess that needs JS then