Another search box problem(s)

[jhande]

Help... possibly broken

 

At one time this worked, but for some reason it no longer does.

 

I had default text "in" the input box (such as: Search by Keyword or Item #) and when clicking in it to enter the search query the default text would disappear. Now it doesn't! You have to click and highlight the text to write over it.

 

Any idea what might have caused that or where to look?

I always had a similar problem with my product notifications infobox until I dumped it.

 

Help... design issue

 

Instead of a typical "draw input field" I would like to use a background image.

I tried playing around with the code but no matter what I have done, it broke.

 

I tried using a CSS solution but I don't think that's a good idea as it might break session ID's or what not. Plus I had alignment issues with the text input background image and the go button (couldn't keep them next to each other).

 

I would appreciate any help, tips or pointers.

 

I'm in the process or designing my site while my family works on database product entries.

 

My old code for the search box (seach.php):

// Enhanced Quick Search
'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_draw_hidden_field('search_in_description', '1') . tep_draw_hidden_field('inc_subcat', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');
// End Enhanced Quick Search

 

My current code moved to header:

<form name="quick_find" method="get" action="[url="http://handeshobbies.com/advanced_search_result.php"]http://handeshobbies.com/advanced_search_result.php[/url]">
<input type="text" name="keywords" size="10" maxlength="30" value="Search by Keyword(s) or Item#" style="width: 190px" class="searchtextarea">
<input type="hidden" name="search_in_description" value="1">
<input type="submit" value="Go" class="gobutton"><br>
<br>
<a href="[url="http://handeshobbies.com/advanced_search.php"]http://handeshobbies.com/advanced_search.php">Advanced[/url] Search</a>
</form>

 

CSS version I found (HTML):

<div class="searchfield">
<input type="text" name="keywords" size="10" maxlength="30" value="Search by Keyword or Item#" style="width: 190px" class="searchtextarea"><input type="hidden" name="search_in_description" value="1"><button id="gobutton" type="submit"> </button>
</div>

 

Matching stylesheet entries:

.searchfield {
width: 190px;
height: 25px;
background: url(images/searchbox.gif)  no-repeat;
margin-right: 2px;
}

.searchtextarea {
width: 180px;
height: 17px;
background: none;
border: none;
color: #000000;
margin-top: 4px;
margin-left: 7px;
}

#gobutton {
   width: 17px;
height: 20px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(images/magnifying_glass.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}

[Bryce F]

Not sure what the osC "proper" way would be, but here's what I'd do.

 

Change:

<input type="text" name="keywords" size="10" maxlength="30" value="Search by Keyword or Item#" style="width: 190px" class="searchtextarea">

 

to:

<input type="text" name="keywords" size="10" maxlength="30" value="Search by Keyword or Item#" style="width: 190px" class="searchtextarea" onFocus="erase(this)">

and somewhere on the top of the same page put:

<script language="JavaScript">
var newpage=1;
function erase(someobject){
 if (newpage == 1){
   newpage = 0;
   someobject.value = "";
 }
}
</script>

 

I didn't test this as I'm not at home. But I hope you get the general idea.

[burt]

tep_draw_input_field('keywords', TEXT_SEARCH_SITE, 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px" onFocus="this.select()"')

 

define(TEXT_SEARCH_SITE, 'Search Site');

[Bryce F]

tep_draw_input_field('keywords', TEXT_SEARCH_SITE, 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px" onFocus="this.select()"')

 

define(TEXT_SEARCH_SITE, 'Search Site');

 

Haha yeah, what he said. :)

[jhande]

Awesome, thanks guys!

 

That fixed my clicking problem.

 

Any idea how I can line up the searchbox background image and the go button image?

 

When I try I get either:

The searchbox aligned left on the margin with the go button to the right where it's supposed to be or...

The searchbox aligned in the center of the column with the go button on the next line below.

 

Example (kind of):

 

Browser/Screen edge[searchbox] [Go button]

 

or

____[searchbox]

_______[Go]

 

I'd like to have them on the same line centered in the column (table cell):

 

__ [searchbox] [Go]

 

[jhande]

Oh Oh...

 

I tried what Burt suggested but lost the searchbox altogether. Obviously I must have done it wrong.

 

So I tried what Bryce posted and it worked.

 

Dang I'm so confussed now... wish I didn't need all these meds to keep my head on since it's no longer on straight!

 

Help... in simpleton terms (Editing for Jim, PHP for DUM Dummies).

 

 

 

 

 

[burt]

I do not post the full code you need - you needed to use your code, along with my slight change.

[jhande]

Oop's... Sorry Burt my bad.

 

I'll try again.

 

I also fixed my alignment problem.

[burt]

// Enhanced Quick Search
'text' => tep_draw_input_field('keywords', TEXT_SEARCH_SITE, 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px" onfocus="this.select()"') . ' ' . tep_draw_hidden_field('search_in_description', '1') . tep_draw_hidden_field('inc_subcat', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');
// End Enhanced Quick Search

[jhande]

Thanks Burt, got it...

 

Do you know if it's possible to change the forms default textbox to a background image?

 

I can do it when using the previously mentioned CSS version, but that code doesn't resemble the one with osC and I'm afraid it might break session ID's.

 

Any thoughts or ideas?

[jhande]

I played with the includes\boxes\search.php and was able to utilize a background image instead of the default input rectangular box. But I couldn't adjust the alignment of the text displayed or typed into it.

 

I had moved the search box to my header using this code (which gives me all that I want):

<div class="searchfield">

<input type="text" name="keywords" size="10" maxlength="30" value="Search by Keyword or Item#" style="width: 190px" class="searchtextarea" onfocus="this.select()"'><input type="hidden" name="search_in_description" value="1"> <button id="gobutton" type="submit"> </button>

</div>

 

Do I need to add anything or change anything before going live with it?

Such as does it have a problem with SSL/Non-SSL or Session ID's.

 

Thanks and sorry for keep dragging this out.