Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Discontinued/Classic Products: Listings Manager Add-ons:
changing default search values - or hiding them

 
 


cclinton
User

Sep 1, 2006, 11:39 AM

Post #1 of 6 (6117 views)
Shortcut
changing default search values - or hiding them Can't Post
Anyone know how to make a value appear in the search field (text field) of the search form but not go through the search process as an actual value?

In other words, I want to build a skinny search form on my site. To keep the form small, I don't want to list the titles next to the form fields nor above the fields. Instead, I want to place the name of the field in the field itself. This works with drop downs as I can give the first option an empty value. Thus choosing this does not send anything to the search script. Example:
<select name="hfield10_keyword">
<option value="">Choose an Office
<option>Carson
<option>Cerritos
</select>
When they select the first option or don't change it, no keywords are sent to through the script for lfield10.

I am trying to determine how to do this with text fields. As an example, let's use the city search field, in this case lfieldx. I'd like to have city appear in the field and, when they click on it, city disappears allowing them to enter the name of a city. If they decide to not enter a city, I want the word city (the default value in the field) to have an empty value.

I already determined how to make the value disappear when clicking in the field:
<SCRIPT>
<!-- Begin
document.write('<input type="text" size="22" name="lfieldx_keyword" value="City" onFocus="if(this.value==\'City\')this.value=\'\'\" />');
// End -->
</SCRIPT>

The problem is that anyone NOT entering a city forces the keyword city through the script for lfieldx.

Any ideas?


Damon
Staff / Moderator


Sep 1, 2006, 4:22 PM

Post #2 of 6 (6108 views)
Shortcut
Re: [cclinton] changing default search values - or hiding them [In reply to] Can't Post
Hi,

Not being a javascript guy I'm not sure how to do this but I took a look around the net and found that salon.com (use the Preview Salon link from the splash page) was doing something very similar to what I think you want.

Take a look at the Search text field. Click on the field and the word Search disappears. And if you don't enter anything and click Go, it removes the word Search.

Hopefully it is a good example of what you had in mind.

If anyone else has some javascript code for getting this result, please post. :)

--------------------------------------------------- 
Cheers
Damon Edis
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

(This post was edited by Damon on Sep 1, 2006, 4:23 PM)


OtownAutos
User

Sep 2, 2006, 2:46 AM

Post #3 of 6 (6100 views)
Shortcut
Re: [cclinton] changing default search values - or hiding them [In reply to] Can't Post
cclinton,

I have done this on my site, take a look www.otownautos.com. The code I used for the form is as follows:

Code
 <FORM name="searchvehicles" method=get action="http://www.otownautos.com/am/exec/search.cgi"> 
      <INPUT type="hidden" name="search" value="1"> 
      <INPUT type="hidden" name="perpage" value="10"> 
      <input type="hidden" name="sort_order" value="1,abc,forward"> 
      <INPUT type="hidden" name="marknew"  value="2"> 
      <input type="hidden" name="template" value="_search_results.html"> 
      <td width="169" height="27" align="right"><input type="text" name="lfield1_keyword" class="dropdown" value="Enter Make or Model" onFocus="document.searchvehicles.lfield1_keyword.value=''" tabindex=1> 
      <img src="/images/pixel.gif" width="4" height="1"> </td> 
      <td width="93" height="27" align="left"><input type=image name="search" src="/images/search_button2.gif" border=0 alt="Search Otownautos for you next car or truck" tabindex=2> 
      </td></FORM>


I put the textfield in bold, the main thing to look at is value and onfocus. Hope this helps.

David Rogers
[url "http://www.zybr.com"]ZYBR media[/url] an Olando based web design studio.
[url "http://www.otownautos.com"]OtownAutos.com[/url] (uses Auto Manager)
[email]webmaster@otownautos.com[/email]


cclinton
User

Sep 5, 2006, 9:38 AM

Post #4 of 6 (6033 views)
Shortcut
Re: [OtownAutos] changing default search values - or hiding them [In reply to] Can't Post
David,

Thanks for your help though your code didn't solve my dilemma. Your code, though cleaner, works like the code I was already using where the words are shown in the text field and clicking in the field makes them disappear. The problem is, I "HAVE TO" click on them to make them disappear. This field is part of a multi-field search form and thus leaving the default text in the field causes the form to search for the default text. This is not a problem with your form as it is the only field and thus users have to click on it and type something. On my form, I want users to be able to search with this field, with some other field or with many fields. This means that many of them won't be clicking in this field and thus the default text is forced through the seach script.

So, I am off to read through the code for the sites that Damon suggested.

Any other ideas are greatly appreated.


cclinton
User

Sep 5, 2006, 10:05 AM

Post #5 of 6 (6031 views)
Shortcut
Re: [Damon] changing default search values - or hiding them [In reply to] Can't Post
Damon,

Thanks for the suggestion. Upon closer examination, Salon wrote scripts based on a single search field. This isn't working in my form as I have more than one possible search field.

Has anyone seen other examples where a site uses default text that does not get posted to the search script?


cclinton
User

Sep 5, 2006, 12:27 PM

Post #6 of 6 (6023 views)
Shortcut
Re: [cclinton] changing default search values - or hiding them [In reply to] Can't Post
I found a script that works:

Script:

// specify the name of your form
var thisForm = "testForm";

// load field names and default values into list
var defaultVals = new Array();
defaultVals[0] = new Array("name", "(your name here)");
defaultVals[1] = new Array("email", "(your email address here)");
defaultVals[2] = new Array("phone", "(your phone number here)");

// populate fields with default values on page load
function MPLoadDefaults() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == '')
elements[thisField].value = thisDefault;
}}}

// clear default value from field when selected
function MPClearField(field) {
var fieldName = field.name;
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (thisField == fieldName) {
if (field.value == thisDefault) field.value = '';
break;
}}}

// clear all defaults when form is submitted
function MPClearAll() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == thisDefault)
elements[thisField].value = '';
}}}

Notes:
1 - change testForm in first part to name of your form
2 - change the Array names and text to match that of your fields (example: change "name" to "city" and "your name here" to "enter city here")
3 - you can add as many Arrays as wanted
4 - add onload to page as follows:
<body onload="MPLoadDefaults()"> or <body onload="SomeOtherFunction();MPLoadDefaults()">
or at end of script like so:
// load default values if body tag is unavailable
window.onload = MPLoadDefaults;
5 - add onsubmit="MPClearAll()" to Form tag
6- add onfocus="MPClearField(this)" to text field tag
7 - make sure that value of text field tag is same as value for Array in script and that field name matches as well.

That's it. Works great.