Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How can I create a Google and Google Images search box?

I've seen your blog entries about how to create a search box for Google on my site, and how to create a search box for Google Images on my site, but what I'd love is a single, consolidated search box for both. Is that possible?

Dave's Answer:

Anything's possible in HTML and JavaScript!

The question is more "is this insanely difficult, or easily accomplished?"

The answer is ... well, kinda. I looked at this problem myself a couple of times but found that my limited knowledge of JavaScript made it a bit too much to figure out how to send the search query to a different address depending on whether the user indicated they wanted to search Google or Google Images.

Fortunately, I know a lot of great JavaScript programmers and developers, and one of 'em, Luke Kingland, offered to have a shot at it. Here's his solution:

Try it, you'll see, it works perfectly!

There are two parts to this solution, and then I sprinkled in some CSS magic to make it look pretty. Let's start with the FORM element, which is basic HTML:

<form method="get" action="#" onsubmit="runsearch(this);return false;">
Search Google for
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="radio" name="searchType" checked="checked" /> all pages
<input type="radio" name="searchType" /> just images
<input type="submit" value="Search" />
</form>

What's kind of weird here is that the target URL, the "action" attribute, is basically left blank. That's because it's the JavaScript that's going to do the work, and that looks like this:

What I added is some simple CSS to make the search box a bit prettier. I did that by adding a "style" attribute to the FORM tag:

style="border:1px solid black;padding:4px;background-color:#ccc;"

Put all the pieces together and here's the copy-and-paste code you can just drop into your Web page or profile as you'd like:

<script>
function runsearch( form ) {
var websearch = "http://www.google.com/search";
var imagesearch = "http://images.google.com/images";
if( form['searchType'][0].checked ) {
form.action = websearch;
} else {
form.action = imagesearch;
}
form.submit();
}
</script>
<form method="get" action="#" onsubmit="runsearch(this);return false;"
style="border:1px solid black;padding:4px;background-color:#ccc;">
Search Google for
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="radio" name="searchType" checked="checked" /> all pages
<input type="radio" name="searchType" /> just images
<input type="submit" value="Search" />
</form>

And there ya go! Hope this is helpful!

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: CGI Scripts and Web Site Programming , HTML and CSS (Article 9136)
Tagged: form programming, google images, google search, image search, javascript
Previous: How can I print one message in a Gmail message thread?
Next: Best practices on sending LinkedIn invitations?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Rather amazingly, there are no comments on this article yet.

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!