How to append HTML form data into the URL as path and not as a query string?

Question

So a typical HTML form with a get would look like this :

<form action="https://mywebsite.com/mypage" method="get">
  <input type="text" id="myparam" name="myparam">
  <input type="submit" value="Submit">
</form>

and takes the user to : https://mywebsite.com/mypage?myparam=value

However, I would like to know if it is possible for my form to take my user to : https://mywebsite.com/mypage/value ? Basically, adding the myparam input's value to the path at the end of the url.

Thanks in advance !

I guess I could write a JavaScript function that redirects the user based on what is in the input, but that doesn't seem like the best way to do it, is it? — Shiverz
– Shiverz, Commented Jul 21, 2021 at 15:41

muhammed ikinci · Accepted Answer · 2021-07-21 16:07:17Z

1

You can create javascript function or you can declare a backend function, and return a redirect to your request route

document.querySelector('form').addEventListener("submit", function (e) {
    e.preventDefault()
    
    let param = document.querySelector('input[name="myparam"]').value

    window.location.href = 'https://mywebsite.com/mypage/' + param
})

answered Jul 21, 2021 at 16:07

muhammed ikinci

7472 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shiverz Over a year ago

Yeah, that's what I ended up doing. Is there no solution to do it in a form?

muhammed ikinci Over a year ago

Another one you can write htaccess or nginx rewrite rule but you can't do that with form

Collectives™ on Stack Overflow

How to append HTML form data into the URL as path and not as a query string?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related