Multi-Search Form With Thumbnails

This page shows how to make a multi-search form using radio buttons with thumbails or logos as per the example below. This is a variation of the standard radio button version, which in turn is a variation on our original multi-search form. We also have a slightly different version that doesn't use the radio buttons.

   

To create a similar search form, use the code below and customize it to your needs.

Javascript & CSS

Place this code in the page head:

<script type="text/javascript">
function selectSearch(se) {
 if(document.getElementById){
  document.getElementById(se).checked = true;
 }
}
function dosearch() {
 var sf=document.searchform;
 for (i=sf.sengines.length-1; i > -1; i--) {
  if (sf.sengines[i].checked) {
   var submitto = sf.sengines[i].value + escape(sf.searchterms.value);
  }
 }
 //window.location.href = submitto; // Opens in same window
 window.open(submitto, "resultsWindow", "height=500,width=740"); // Opens in a new window
 return false;
}
</script>
<style type="text/css">
input[type="radio"], input[type="radio"]+label img {
 vertical-align: middle;
 cursor:pointer;
}
</style>

Form Code

This is the code for the form (customize as required):

<form name="searchform" onSubmit="return dosearch();">
<input name="searchterms" type="text" style="width:200px;">
<input type="submit" name="SearchSubmit" value="Search">
<div style="margin-top:20px;">
<input name="sengines" type="radio" id="asda" value="http://groceries.asda.com/asda-estore/search/searchcontainer.jsp?trailSize=1&searchString=" checked="checked">
<label for="asda"><img src="img/asda.png" width="75" height="24" alt="" onclick="selectSearch('asda');" /></label> &nbsp;
<input name="sengines" type="radio" id="tesco" value="http://www.tesco.com/groceries/product/search/default.aspx?searchBox=">
<label for="tesco"><img src="img/tesco.png" width="87" height="24" alt="" onclick="selectSearch('tesco');" /></label> &nbsp;
<input name="sengines" type="radio" id="sainsburys" value="http://www.sainsburys.co.uk/sol/global_search/global_result.jsp?bmForm=global_search&GLOBAL_DATA._search_term1=">
<label for="sainsburys"><img src="img/sainsburys.png" width="124" height="24" alt="" onclick="selectSearch('sainsburys');" /></label>
</div>
</form>