Jump to content

jquery append input value to url


bravo14

Recommended Posts

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?

Link to comment
Share on other sites

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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.