Search box question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cargo747
Forum Newbie
Posts: 1
Joined: Thu Jul 03, 2008 6:33 pm

Search box question

Post by cargo747 »

Moved to Client Side.

I have a basic php search box

Code: Select all

<form method="post" action="../search.php">
   <input type="hidden" name="posted" value="1"/>
    <input type="hidden" name="sprice" value=""/>
    <input class="search" type="text" name="stext" size="60" value="Search by Keyword or Part #"/>
<input type="image" name="Submit" src="../images/go.gif"/></form>
I would like to have the text disapear when the box is clicked. I can't seem to figure out how to make that work.

Thanks Cargo747
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Re: Search box question

Post by tecktalkcm0391 »

Javascript:

Code: Select all

function clear(){
   documents.forms[0].stext.value = '';
}

Code: Select all

onclick="clear();"
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Search box question

Post by VladSun »

It's more apropriate to handle the "onfocus" event ...
Also it's better to use the HTML object itself:
[js]<input class="search" type="text" name="stext" size="60" value="Search by Keyword or Part #" onfocus="this.value=''"/>[/js]
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Re: Search box question

Post by tecktalkcm0391 »

True. I forgot about using onFocus, and I'm just used to making functions, but that is easier.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Search box question

Post by JellyFish »

Yes but if the user accedently loses focus when they typed something in the search box, they will lose what they typed when they give focus back to the search box again.

The solution to this is:

Code: Select all

 
<input class="search" type="text" name="stext" size="60" value="Search by Keyword or Part #" onfocus="if (this.value == 'Search by Keyword or Part #') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Search by Keyword or Part #'; }"/>
 
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: Search box question

Post by Ollie Saunders »

Code: Select all

<form method="post" action="../search.php">
a search is a GET operation make sure you use method="get"
Post Reply