Redirect to html page based on user input

Question

I have a text box on a webpage where the user enters a location of a city. I want that to be incorporated into the url. I have a Spring controller that handles those url's but I am having trouble redirecting to that url in the first place. Here is my code

<span id = "form">
            <form  id = "input" target="_self" action="http://localhost:8090/location/city" method="GET" th:action="@{/location/city}">
                <label for="loc" align = right>Location:</label>
                <input type="text" placeholder="Enter Location" th:name= "location" id="loc">
                <input type="submit" value="Submit" onclick="setMode()">
            </form>
            <script>
                document.getElementById("input").action = "http://localhost:8090/location/" + document.getElementById("loc").value;
            </script>

I only want to add the name of the city but when the users clicks submit the url becomes "/?location=cityname" I want "/location/cityname.

Answer 1

<input type="submit" value="Submit" onclick="setMode()">

type="submit" will trigger basic browser standards for submitting forms. When you change it to a anchor link without href it will work. You can of course style the anchor link to look like an button. Other wise you should use event.preventDefault(); to prevent form for submitting.

You can use;

<a onclick='setMode()' >Submit</a>

Instead of;

<input type="submit" value="Submit" onclick="setMode()">