Home/ Questions/Q 952771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T23:56:52+00:00

I am trying to use a little jQuery to hide the initial value in

  • 0

I am trying to use a little jQuery to “hide” the initial value in a Google Search box when you click in the box and I am missing something.

Here is the search box code:

<div id="search_box">
<form action="http://mfrp.ehclients.com/search_results" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="017425724926122041548:1ccj3d-e1-s" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" id="q" name="q" value="Search..." size="31" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>

Here is the jQuery:

<script type="text/javascript">
  $('#q').click(function() {           
  if($(this).val() == 'Search...') 
  $(this).val('');
  });
</script>

Only problem is, it doesn’t work. Here is the page.

I would appreciate some help sorting this out.

Thanks,

Forrest

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When your code it needs to run when the DOM elements available to find, so $("#q") finds the id="q" elements to bind to. This means your script either needs to run after the elements it needs in the page (e.g. end of the <body>), or when the DOM is completely ready, like this:

    $(function() {
  $('#q').click(function() {           
    if($(this).val() == 'Search...') 
      $(this).val('');
  });
});

    If you’re not doing this, and the $("#q") selector doesn’t find any elements…there’s just nothing to run .click() on, which binds that handler.

    I think what you’ll want is the reverse as well, which would look like this:

    $(function() {
  $('#q').focus(function() {           
    if($(this).val() == 'Search...') $(this).val('');
  }).blur(function() {
    if($(this).val() == '') $(this).val('Search...');
  });
});

    This will put “Search…” back in the box if it’s empty and someone clicks outside, by relying on .focus() and .blur() instead of .click().

    • 0