jquery append input value to url

[bravo14]

Hi all

 

Using a from with this code

<form class="search-form">
        <input type="text" placeholder="Search..." id="txtSearch" autocomplete="off" value="">
        <button id="btnSearch" class="search-btn">
          <i class="flaticon-magnifying-glass"></i>
        </button>
      </form>

and the jquery below

<script type="text/javascript">
var q =  $("#txtSearch").val();
$('#btnSearch').click(function(){
  location.href = "/recipes/search/" + q;
}); 
</script>

I am trying to redirect to a page /recipes/search and then the inpit value from the search field, but the input value is not appending.  I am hoping I am missing something simple?

[requinix]

You need the value of #txtSearch at the time the button is clicked, not when the page loads.

And if you're going to be putting arbitrary values into the URL then you need to use a function like encodeURIComponent for it.

[Barand]

Also, you have a button element inside a form. That will cause the form to be submitted and your page to reload when the button is clicked.

• Remove the <form> tags, or
• change the button element to a span element styled to look like a button, or
• suppress the default action when the button is clicked