Free tech support / small logo


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:

Search Google for all pages just images

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:

<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>

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:

<!-- Google search and image search box, from AskDaveTaylor.com -->
<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>
<!-- end of google search box code -->

And there ya go! Hope this is helpful!









Subscribe!
Never miss another Q&A article! Click to subscribe: Add to Google Reader Add to My Yahoo! Subscribe in NewsGator RDF XML
Comments

Hello, I'm using the translator of google, as they are italian and I can not write good English!! forgives mistakes :-)

How can I add my Google AdSense ID in the search bar you describe ...
thanks and sorry again for the bad translation

Posted by: valerio at December 28, 2009 2:20 PM

DAVE, many thanks, for your "google search form"
good luck.

Posted by: Yustiadi at May 13, 2010 9:50 PM

I have something to say, now that you mention it, but ...
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you for all your efforts on this Web site by buying you a cup of coffee!

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











Remember personal info?


Please note that I will never send you any unsolicited email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Recent Entries


Search
I Need Help!
Need Help? Ask Dave Taylor!


© 2002 - 2012 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.