Input text in search box pre-search

**David** · Feb-12-2007, 09:55 PM

To set the field value you can use some HTML.
<input type="text" name="zoom_query" size="10" value="Your text here">

But the real trick if clearing the field when the user clicks on it to enter their own search word and restoring the value if they don't enter anything.

Code:

[FONT=Courier New]<script type="text/javascript">[/FONT]
[FONT=Courier New]function clickclear(thisfield, defaulttext) {[/FONT]
[FONT=Courier New]  if (thisfield.value == defaulttext) {[/FONT]
[FONT=Courier New]    thisfield.value = "";[/FONT]
[FONT=Courier New]  }[/FONT]
[FONT=Courier New]}[/FONT]
[FONT=Courier New][/FONT] 
[FONT=Courier New]function clickrecall(thisfield, defaulttext) {[/FONT]
[FONT=Courier New]  if (thisfield.value == "") {[/FONT]
[FONT=Courier New]   thisfield.value = defaulttext;[/FONT]
[FONT=Courier New]  }[/FONT]
[FONT=Courier New]}[/FONT]
[FONT=Courier New]</script>[/FONT]
[FONT=Courier New][/FONT] 
[FONT=Courier New]<input type="text" name="zoom_query" size="10" value="Your text" [/FONT]
[FONT=Courier New]onclick=”clickclear(this, 'Your text')” onblur=”clickrecall(this,'Your text')” />[/FONT]

**o0bago0ba** · Feb-12-2007, 10:06 PM

Awesome

Many thanks - great product by the way

**samuelmaxton** · Aug-16-2011, 05:48 PM

Input goes inside a form but loses functionality

Doesn't the input have to be in a "form" to work properly? I can't get this javascript to work on my page so that the field appears with default text and disappears/reappears on user action. I just copied it from above. Here's my page:

<html>
<head>
<title>You have reached a random place</title>
<meta name="description" content="dogs and other farm animals"/>
<meta name="keywords" content="albert,einstein,physics" />

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}

function clickrecall(thisfield, defaulttext) {
if (thisfield.value == “”) {
thisfield.value = defaulttext;
}
}
</script>
</head>

<form method="get" action="http://www.jessiewilliams.com/search/search.php">
<input type="text" name="zoom_query" size="10" value="Your text"
onclick=”clickclear(this, ‘Your text’)” onblur=”clickrecall(this,’Your text’)”/>
<input type="submit" value="Click and See"/>
</form>

<h1>This is a Test</h1>

<body style="background-color:yellow;">

<p>blah blah</p>
<br />

</body>
</html>

**David** · Aug-17-2011, 01:06 AM

This question was answered twice via E-mail. Your HTML is invalid.

For example, your <form> tag is between the <head> and < body> tag. Which isn't valid HTML. Nor is the use of reverse quotes, like in ‘Your text’

Input text in search box pre-search

Input text in search box pre-search

Comment

Comment

Comment

Comment