CODEWITHSUNDEEP
javascriptjqueryformsurl
Narendra Rajput
Narendra Rajput

Reputation: 711

Using GET Request submit form to the Page Itself

What I need is when the user types his query in the search Box. 

    <form class="navbar-search pull-left">
       <input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
    </form>

I dont have a Button to submit the form. I want the form to be submitted when the user presses the Enter Key. And when the user presses the Enter key I want the Query to be shown in the URL. Like the URL before the submission

http://example.come/

And when the user enters his text and presses the enter key. I want the query to be displayed in the URL like this

http://example.come/#query

Without reloading the whole. Is this possile using the Javascript or Jquery or whatever is more easy.

Edit: Here's what I tried window.location.hash = get_query ;

 if (get_query.length != 0) {
      $("#query").val(get_query);
  $('.search_input').trigger('keyup'); // This is the Event which triggers 
  }

Upvotes: 1

Views: 1566

Answers (1)

scessor
scessor

Reputation: 16115

Add a input with type submit element which is hidden to support submitting by the enter key:

<form id="form1" class="navbar-search pull-left" action="">
    <input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
    <input type="submit" style="display: none;">
</form>

On form submit change the hash with the value of the input:

$('#form1').submit(function() {
    window.location.hash = '#' + $("#query").val();
    return false;
});

Also see my example and the associated jsfiddle.

Upvotes: 1

Related Questions