On click of search button send user to new tab showing results from another site?-CodePudding

I am trying to create a search box on my site. However when someone clicks "search" or presses "enter/return". I want a separate tab to open with the search results from a different site to be displayed.

Example:

My site: www.example.com

# using another answer on stackoverflow
# I have tried a lot of different action urls.
# the website url to which I want to send the search: 
<form method="get" action="website.com/?searchTerm">
    <input type="text" name="searchTerm"/>
  </form>

When I try to demo it using the above and press enter, I simply go to the website i.e. website.com/?searchTerm not the results page.

Another approach I thought might work is to replace the searchTerm in the url of the results page of the website when Enter or button is clicked on www.example.com using a tags.

CodePudding user response：

You can use the target attribute on the form tag.

Don’t forget to inform your users, including screen reader users, that the action will open a new tab.

If you use the GET method, input names and values are going to be passed as query parameters. So <input name="searchTerm" value="test"> will become ?searchTerm=test in the requested URL.

get: The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects.

<form method="get" target="_blank" action="https://example.com/SearchDisplay">
  <label>Search Term
      <input type="search" name="searchTerm">
      </label>
  <button type="submit">Search (opens in new tab)</button>
</form>

The above code would not work in an interactive stack snippet, because it would be inside an iframe.

For your search to actually work with the target site

If you inspect the search form on your target website, you’ll notice they use SearchDisplay as the action. Additionally, they include a bunch of hidden fields in their form. You will need to figure out which ones to include in your form as well, for your query to not get blocked.

Beware, though, that this are implementation details of the target shop, not a stable search API like OpenSearch. So it might change at any time, and your search form will no longer work.

The form code from the target website:

<form accept-charset="UTF-8" name="CatalogSearchForm" action="SearchDisplay" method="get" id="searchForm" >
            <div  role="group" aria-label="...">
                <div >
                    
                    <input type="hidden" name="storeId" value="5451206" id="WC_CachedHeaderDisplay_FormInput_storeId_In_CatalogSearchForm_1">
                    <input type="hidden" name="catalogId" value="10002" id="WC_CachedHeaderDisplay_FormInput_catalogId_In_CatalogSearchForm_1">
                    <input type="hidden" name="langId" value="-3" id="WC_CachedHeaderDisplay_FormInput_langId_In_CatalogSearchForm_1">
                    <input type="hidden" name="pageSize" value="10" id="WC_CachedHeaderDisplay_FormInput_pageSize_In_CatalogSearchForm_1">
                    <input type="hidden" name="beginIndex" value="0" id="WC_CachedHeaderDisplay_FormInput_beginIndex_In_CatalogSearchForm_1">
                    <input type="hidden" name="sType" value="SimpleSearch" id="WC_CachedHeaderDisplay_FormInput_sType_In_CatalogSearchForm_1">
…