Calling js function from the anchor tag href url

Question

I have a search box with search button. When user enters the text in search box and click on search button, it should redirect the url by passing inputed text in search box as an parameter in url.

#input tag for search box
<input type="search" placeholder="search" class="search_3">        
<a href="https:.........?searchname=">
    #input tag for search button
    <input type="submit" class="submit_3" value="Search"/>
</a>

i have to use the inputed text for searchname parameter in the anchor tag url.

How can i achieve this?

Answer 1

I would try to HTML tag things properly, to avoid useless JS.

<form method="GET" action="https:...">
<input type="text" name="searchname"/>
<button type="submit">Go!</button>
</form>

You can use form attribute if the input is outside the form tag (see HTML living spec https://html.spec.whatwg.org/multipage/forms.html#the-input-element )

Answer 2

Just call onlclick your js method and get the search field value and redirect using js code.You can try like this :

<input type="search" placeholder="search" class="search_3" id="search_3"> 
   <button name="redirect" onClick="redirecturl()" class="submit_3" value="Search">

    <script type="text/javascript">

    function redirecturl()
    { 
    window.location.href = "http://www.example.com/?searchname="+document.getElementById("search_3").value;

    }

    </script>