Search code examples
htmlinputhref

How to use input text in a href (HTML)

What I want to do is have an input and then refer to that input in an href, I am a total HTML noob so I don't even know if this is possible but something like this:

<input type="search" id="Searchbar">
<a href = "/user/"+Searchbar><button>Search<button></a>

Is it possible to do something like this or similar?

Solution

  • Is necessary use of Javascript to complement part of this action.

    Note the tag "input" is "Self-Closing Tag" "/"

    <input type="search" id="searchbar" value="type here"/>
<button id="goto">Search</button>

    In your script Javascript add this:

    document.getElementById("goto").addEventListener("click", goTo);

function goTo() {  
  var result = document.getElementById("searchbar").value;  
  window.location.href = '/user/'+result;
}

    My example: https://codepen.io/dieterich/pen/MWKyLOE