CODEWITHSUNDEEP
javascriptjqueryhtmlsearch
ProfessionallyInept
ProfessionallyInept

Reputation: 81

Search input gets sent to another search bar on a different page

I am trying to get the input from my main sites search bar to be sent to the search bar of my second site and have the results of the second sites search appear.

I have played around with some code that almost works, however instead of searching the second site it instead adds the search input onto the url.

       <div class="form-group">
          <form id="search-products" method="get">
            <input type="search" class="form-control input-thick-border" id="test" placeholder="Search..." name="keyword">
          </form>

          <script type="text/javascript">
            document.getElementById('search-products').onsubmit = function() {
              window.location = "http://website.com/Search" + document.getElementById('test').value;
              return false;
                }
            </script>

        </div>

So if I type "pen" into the first search bar then it will link to "website/searchpen" which doesn't exist so it redirects to the "not found" page. I feel like I am very close I am just missing some code that takes the input from the first search bar and searches for it in the second search bar. Any help or ideas will be much appreciated.

Upvotes: 1

Views: 3855

Answers (1)

Brad
Brad

Reputation: 163232

You don't actually need JavaScript for this. A normal form submit does exactly what you're looking for. Just set the form action.

<form method="get" action="https://example.com/search">
  <input type="search" name="keyword" />
</form>

On form submit, it will go to something like:

https://example.com/search?keyword=Whatever+the+user+typed+in

Upvotes: 2

Related Questions