A seach bar with drop down menu [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

simonking

08-03-2005, 11:38 AM

Hi,

Basically what I am after is a form that lets me type in search, choose a search type/engine (eg. Google World Wide, Google Australia, Google Image Search) from a drop down menu and search.

I have tried to do it with this code posted here, but as I have not had much experience with forms yet, I am not sure how to do them. I think maybe I might need to use more JavaScript (the script in there presently is from google search page).

Thank-you

<HTML>
<HEAD>
<TITLE> Search Construction Page </TITLE>
</HEAD>

<BODY>

<FORM action=http://www.google.com.au/search name=f onsubmit="rbi(this);">

<SCRIPT>



</SCRIPT>

<SELECT>
<OPTION id=all name=meta value=""> <LABEL for=all>Google World Wide</LABEL>
<OPTION id=cty name=meta value="cr=countryAU"> <LABEL for=cty>Google Australia </LABEL>
<OPTION id=cty name=meta value="cr=countryTH"> <LABEL for=cty>Google Thailand </LABEL>
</SELECT>

<INPUT maxLength=256 size=20 name=q value="">
<INPUT type=submit value="Search" name=btnG>

</BODY>

</HTML>

coothead

08-03-2005, 12:53 PM

Hi there simonking,

and a warm welcome to these forums. :)

Have a look at this, it does not have a drop down, but could be modified if required....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Sites</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<style type="text/css">
/*<![CDATA[*/

.bttn {
width:50px;
font-family:verdan,arial,helvetica,sans-serif;
font-size:12px;
}
#text {
width:125px;
}
#inpt {
margin:3px 3px 3px 0;
}
legend {
padding:0 10px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#666;
font-style:oblique;
}
fieldset {
width:360px;
border:double 3px #666;
padding:5px;
margin:auto;
}
#ifrm {
width:765px;
height:471px;
display:none;
margin:auto;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var goGoogle="http://www.google.com/search?hl=en&ie=UTF-8&q=";
var goYahoo="http://search.yahoo.com/search?_adv_prop=web&x=op&ei=UTF-8&prev_vm=p&va=";
var goLycos="http://search.lycos.com/default.asp?lpv=1&loc=searchhp&tab=web&query=";
var text=document.forms;

function google() {
text[0][1].value;
document.getElementById('ifrm').style.display="block";
document.getElementById('ifrm').src=goGoogle+text[0][1].value;
}

function yahoo() {
text[0][1].value;
document.getElementById('ifrm').style.display="block";
document.getElementById('ifrm').src=goYahoo+text[0][1].value;
}

function lycos() {
text[0][1].value;
document.getElementById('ifrm').style.display="block";
document.getElementById('ifrm').src=goLycos+text[0][1].value;
}

function tidyUp() {
document.forms[0][1].focus();
document.getElementById('ifrm').src="";
document.getElementById('ifrm').style.display="none";
}

//]]>
</script>

</head>
<body onload="document.forms[0][1].focus()">

<form action="">
<fieldset>
<legend >search</legend>

<div id="inpt">

<input id="text" type="text"/>
<input class="bttn" type="button" value="google" onclick="google()"/>
<input class="bttn" type="button" value="yahoo" onclick="yahoo()"/>
<input class="bttn" type="button" value="lycos" onclick="lycos()"/>
<input class="bttn" type="reset" value="clear" onclick="tidyUp()"/>

</div>

</fieldset>
</form>

<iframe id="ifrm" frameborder="0"></iframe>

</body>
</html>