|
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? 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:
<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!
Categorized:
CGI Scripts and Web Site Programming
,
HTML and CSS
(Article 9136,
Written by Dave Taylor)
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!
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 ... DAVE, many thanks, for your "google search form" I have something to say, now that you mention it, but ...
I do have a comment, now that you mention it!
|
Recommended
Recent Entries
Search
I Need Help!
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and RSS Feeds Building Web Site Traffic Business and Management CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above Facebook Help Google Plus Help HTML and CSS Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Mac OS X Help Pay Per Click (PPC) Advertising Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help WordPress Help |