Remove empty input values from URL when submitting an HTML form

For a client I had to build a result page with filters. Visitors could filter the results based on five properties. I wanted to make the result reachable by URL so I choose for the GET method. This way, a link could look like:

https://erik.joling.me/results.php?filter_one=abc&filter_two=def

The problem I had was that even when some filters were left empty they would still show up.

https://erik.joling.me/results.php?filter_one=abc&filter_two=def&filter_three=&filter_four=&filter_five=

Luckily it’s possibile with javascript to prevent empty input values from showing up in the URL. There are some hacky methods (changing the element names, or flagging them as disabled), but FormData is the way to go.

Check out this answer on Stack Overflow for a working example: https://stackoverflow.com/a/64029534/9055081