Question

I have a search bar with a button that searches for stuff on another site. I got it to function correctly (it searches on the other site in a new tab) but anytime I click enter in the search bar, the page I’m on reloads. At first it reloaded from pressing enter and clicking search, then I changed the input type to button rather than submit. This took care of reloading when clicking on the button, but when the enter key is pressed the page reloads. Also, it only reloads if the search bar is clicked, not just at all times. The search bar has to be selected for the enter key to reload the page.

html:

<div id="search-3" class="widget widget_search">
    <h3 align="center">Search the other site!</h3>
    <form method="post" name="searchform" id="searchform">

      <span class="searching">
        <input type="text" value="" name="s" id="s" />
      </span>
      <input class="submit" type="button" Onclick="SearchBlog();" value="Search" />

    </form>
</div>

javascript:

function SearchBlog()
{
    var searchQuery = document.searchform.s.value;
    if(searchQuery != ""){
        var destination = "website.com/s" + searchQuery;
        window.open(destination, "_blank");
    }
}

I want to be able to use the enter key to search but I don’t want it to reload the page.

Answer 1

Thats because you are submitting to a page that isn’t there.

Use onsubmit in your <form> declaration instead:

<form method="POST" name="searchform" id="searchform" onsubmit="SearchBlog();">
   ...
</form>

Then make sure you return false; in your SearchBlog() function. And you should be good to go.