html - create a field where you put the ending of a url, click submit and it adds it to the already coded parent url

Question

I'm trying to add a value to the end of a url that's already preset.

So for example a user would type "helloworld" into an input box, press submit and they would be taken to:

https://exxample.com/helloworld

Can I do this in HTML?

question from:https://stackoverflow.com/questions/65885096/create-a-field-where-you-put-the-ending-of-a-url-click-submit-and-it-adds-it-to

Answer 1

Like this

It will go to

https://yoursite.com/portraits/

if you type portraits and hit enter

document.getElementById("urlForm").addEventListener("submit",function(e) {
  e.preventDefault()
  const val = document.getElementById("url").value.trim(); 
  const newUrl = "https://example.com/"+val+"/";
  location=newUrl;
})

<form id="urlForm">
  <input type="text" id="url" value="" />
  <input type="submit" />
</form>