Question

I am trying to create a search input to a site that add the search terms to the end of the url.

This is the url in question:

http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/

You can manually search by adding the search term to the end of the url eg./Search/robert & if the string contains multiple words they need to be separated with “%20” eg./Search/Robert%20Earl.

Here is my current search form:

<form method="get" action="http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Events/Search/" id="searchform" role="search"> 
    <input type="text" value="Search Events" name="s" id="s" onFocus="if (this.value == 'Search Events') {this.value=''; this.style.color='#000000';}"/> 
    <input type="hidden"  name="sitesearch"  value=""/> 
</form>

If I type Kevin into the input, the form returns this url:

http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/?s=Kevin&sitesearch=

I know that I need some Javascript in there to handle the search and build the correct url but I have no idea what is needed.

Anyone have any ideas? Apologies if this has been answered elsewhere. I took a long look around but could not find anyything.

Answer 1

Add onsubmit="return searchForm(this)" to the form tag.

Then, define function searchForm:

<script>
function searchForm(form){
    location.href = "http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/" + form.s.value;
    return false;
}
</script>

See also: Open a URL based on search query without php "?q=(myTerm)" and instead with a simple "/(myTerm)"