Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • HTML & Web Page Design
  • How can I duplicate the CPSC search box?

How can I duplicate the CPSC search box?

May 3, 2014 / Dave Taylor / HTML & Web Page Design / 2 Comments

I need a basic search box for CPSC [The Consumer Products Safety Commission]. I tried everything I could think of, nothing seems to be working. I was going to copy their search form into my blog, but they don’t have an actual form; it’s Javascript. I tried a simple/basic search box, and added their search page URL to the action. No dice. 🙁 So, I was hoping you could help me. Help!

The US Government agency that manages product recalls, the Consumer Products Safety Commission, is a good one to help people know more about, so having a search box on your own page is a great idea. Most sites, however, would prefer if you just sent them the traffic with a link to their site, as I have in the previous sentence. That’s not so good for those of us who would like to hold on to the people that visit our site, and it’s a lot more elegant to embed a search box for another site onto your own than to keep pushing people to other sites rather willy-nilly!

Like any of these tasks, you can crack open the code to their home page and try to decipher things but it’s often easier to operate with the belief that their search system is a “black box” and that it’s your job as an HTML detective to reverse engineer what they have in place. Doing so requires some basic knowledge of HTML forms and how they work.

In this instance, if I go onto the CPSC site and search for “strollers”, here’s the URL of the resultant search results page:

http://www.cpsc.gov/en/Search/?query=strollers&filters=all

This is when I choose “All pages & Documents” from the search box. If, instead, I search “Recalls & News Releases”, the resultant URL looks like this:

http://www.cpsc.gov/en/Search/?query=strollers&filters=recalls

There are three items of information we can glean from this: the page that produces search results is:

http://www.cpsc.gov/en/Search/

The search term itself is sent as “query=pattern” and the way that the system differentiates between a site-wide search and a recalls and news releases only search is “filters=”, with the two possible values of “all” and “recalls”.

To simplify things, let’s just make any searches be of recalls only.

That means we need a form that lets the user specify the “query” variable and pushes the results to the URL specified.

This is done in HTML thusly:

<form method=”get” action=”http://www.cpsc.gov/en/Search/” target=”_blank”>
Search CPSC: <input type=”text” name=”query”>
<input type=”hidden” name=”filter” value=”recalls”>
<input type=”submit” value=”search”>
</form>

What’s that look like? Let’s see:

Search CPSC:

Most importantly, give it a try. You’re safe, the addition of target=”_blank” ensures that the search results will pop up on a new page, not replace this one (a handy addition to forms of this nature that otherwise would take your visitor off to another site).

That’s it. It’s not glamorous or fancy, but I’ll let you dig into the HTML and add some CSS as desired to turn this mundane and austere search box into something more attractive for your site and consistent with your own design.

I will add one thing: If you wanted to duplicate the radio buttons alternating between “search all” and “just recalls”, you could do so with a pair of additional lines in the form that use the same value name, instead of the type=”hidden” hidden variable that we’re passing along:

<input type=”radio” name=”filter” value=”all”> all docs
<input type=”radio” name=”filter” value=”recalls”> just recalls

Not too trick. Of course, if you’re like me, you’ll now spend an hour fiddling with layout. But at least you know it all works!

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
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, Dave, for all your helpful information by buying you a cup of coffee!
add search box, cpsc, html coding, reverse engineering, search box, search form

2 comments on “How can I duplicate the CPSC search box?”

  1. Lana says:
    May 3, 2014 at 7:33 pm

    OMG DAVE!!!!! Thank you sooooo much!!!!! You’re a flippin’ genius, man!!!!!

    You don’t know how long I fooled around with it before I finally gave in and emailed you *hanging head in shame*. I’ve been doing HTML/CSS for 15 years, since I’m self taught, I never really learned the “rules” so I fumble around.

    I wanted to add a hidden field, but wasn’t quite sure what to put. Instead, I wound up adding a Google search pointing to the CPSC website. It worked in a pinch, but this is exactly what I wanted!!!!!

    I really appreciate this, Dave!!!!! Thanks ever so much!!!!! :-*

    Reply
    • Dave Taylor says:
      May 5, 2014 at 10:24 pm

      Glad to help, Lana! 🙂

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • How Do I Download Movies & Shows from HBOMax.com?
  • Can I Calculate Mortgage Payments with Online Tools?
  • How Do I Find Available Disk Space on my Mac System?
  • How to Identify Plants and Flowers with Google Lens on Android?
  • Windows Security Wants Me to Enable “App & Browser Control”?

On Our YouTube Channel

Acer Chromebook 317 -- Budget 17.3" Laptop -- REVIEW

1More ComfoBuds Mini ANC Earbuds -- REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help, (161)
  • Android Help (197)
  • Apple iPad Help (144)
  • Apple Watch Help (52)
  • Articles, Tutorials, and Reviews (344)
  • Auto Tech Help (11)
  • Business Advice (199)
  • Chrome OS Help (23)
  • Computer & Internet Basics (763)
  • d) None of the Above (165)
  • Facebook Help (383)
  • Google, Chrome & Gmail Help (177)
  • HTML & Web Page Design (245)
  • Instagram Help (47)
  • iPhone & iOS Help (605)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (92)
  • LinkedIn Help (85)
  • Linux Help (164)
  • Linux Shell Script Programming (86)
  • Mac & MacOS Help (891)
  • Most Popular (16)
  • Outlook & Office 365 Help (24)
  • PayPal Help (69)
  • Pinterest Help (53)
  • Reddit Help (17)
  • SEO & Marketing (81)
  • Spam, Scams & Security (92)
  • Trade Show News & Updates (23)
  • Twitter Help (217)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (915)
  • Wordpress Help (204)
  • Writing and Publishing (72)
  • YouTube Help (46)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (56)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


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 site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2022 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy