virtualadz Posted May 15, 2006 Share Posted May 15, 2006 i have a search box and want to have a pre-entered text as "ENter search words...." this disappears on mouse click on the text box. i have added the text using value="Enter Search terms...." but couldn/t make it disappear on mouse click, i know it can be done via CSS anyonephp code: $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'left', 'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" value="Search..." style="width: ' . (BOX_WIDTH-20) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . just need someone to make the css code thanks Link to comment Share on other sites More sharing options...
boen_robot Posted May 15, 2006 Share Posted May 15, 2006 The way I see it done in this board is actually by a simple JavaScript with the onfocus event: <input type="text" size="30" name="keywords" onfocus="this.value=''" value="Enter words to search..." /> If you use CSS, you won't have support in IE scince it doesn't support :focus yet. You may use some "external" script if this inline one doesn't suit you. Link to comment Share on other sites More sharing options...
Jonas Posted May 15, 2006 Share Posted May 15, 2006 You can't do it in css, you need javascript. <head> <script type="text/javascript"> function searchInput() { var search = document.getElementById('search'); if (search.value != "") { search.value = search.value; } else { search.value = "Enter Search Terms...."; } }; function noInput() { document.getElementById('search').value = ""; }; </script></head><body><input type="text" name="search" id="search" value="Enter Search Terms..." size="24" onfocus="noInput()" onblur="searchInput()" /></body> Something I've done before. This way, if people decide not to search after all, and click away without having entered anything, "Enter Search Terms..." will be put in again... Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 but how do i add javascript in php and link it my code is just completely different?><!-- search //--> <tr> <td><?php $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_SEARCH); new infoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'left', 'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" value="Search..." style="width: ' . (BOX_WIDTH-20) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>'); new infoBox($info_box_contents);?> </td> </tr><!-- search_eof //-->that's it, css would have been easy, how do i implement js out there Link to comment Share on other sites More sharing options...
skym Posted May 15, 2006 Share Posted May 15, 2006 In addition to boen_robot's code, you might add a variable so that the field will not empty on a second focus: <script type="text/javascript">var toempty = true;function empty(){if (toempty) { document.getElementById('keywords').value=''; toempty = false; }}</script><input id="keywords" type="text" size="30" name="keywords" onfocus="empty()" value="Enter words to search..." /> Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 the question here arises how do i put a link to js out here in between php, any ideas Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 is there anyone who knows how do i include the javascript in the php code that i supplied in post #4, jonas provided only the javascript put how the ###### do i make it into that php code. any help will be nice Link to comment Share on other sites More sharing options...
aspnetguy Posted May 15, 2006 Share Posted May 15, 2006 you could start be calming down and providing your whole source code. Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 this is the whole source code<?php/* $Id: search.php, hpdl Exp $ Virtualadz*/?><!-- search //--> <tr> <td><?php $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_SEARCH); new infoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'left', 'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-20) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>'); new infoBox($info_box_contents);?> </td> </tr><!-- search_eof //--> Link to comment Share on other sites More sharing options...
skym Posted May 15, 2006 Share Posted May 15, 2006 Try this: <!-- search //--><tr><td><script type="text/javascript">var toempty = true;function empty(){if (toempty) {document.getElementById('thekeywords').value='';toempty = false;}}</script><?php$info_box_contents = array();$info_box_contents[] = array('text' => BOX_HEADING_SEARCH);new infoBoxHeading($info_box_contents, false, false);$info_box_contents = array();$info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'),'align' => 'left','text' => tep_draw_input_field('keywords', '', 'size="10" id="thekeywords" maxlength="30" value="Search..." style="width: ' . (BOX_WIDTH-20) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>');new infoBox($info_box_contents);?></td></tr><!-- search_eof //--> If it still doesn't work, see the source code of the page (in the browser) and post the HTML code for that particular form field. Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 Maybe add the bit in red to your code'size="10" maxlength="30" onclick="this.value=\"\"" value="Search..." Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 onclick="this.value=\"\"" value="Search..." , where do i put the javascript code , should i make separate copy for that or inclde it in this php code of mine, if i make a separate copy then i would have to give a link to all my root pages, which will be again difficult task, any ideas???? Link to comment Share on other sites More sharing options...
aspnetguy Posted May 15, 2006 Share Posted May 15, 2006 Why are you building the html elements like that...what is the benefit as apposed to echoing them?I am fairly new to php and am not sure why you are writing everything to arrays. Link to comment Share on other sites More sharing options...
skym Posted May 15, 2006 Share Posted May 15, 2006 Just put it in the PHP code you have shown us. Link to comment Share on other sites More sharing options...
virtualadz Posted May 15, 2006 Author Share Posted May 15, 2006 ok look at the my finishing touch<?php/* $Id: search.php, hpdl Exp $*/?><!-- search //-->script type="text/javascript"> function searchInput() { var search = document.getElementById('search'); if (search.value != "") { search.value = search.value; } else { search.value = "Enter Search Terms...."; } }; function noInput() { document.getElementById('search').value = ""; }; </script> <tr> <td><?php $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_SEARCH); new infoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'left', 'text' => tep_draw_input_field('keywords', '', 'size="10" value="Search..." onclick="this.value=\"\"" maxlength="30" style="width: ' . (BOX_WIDTH-20) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>'); new infoBox($info_box_contents);?> </td> </tr><!-- search_eof //-->have i done it right , Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 have i done it right<{POST_SNAPBACK}> To be honest i can't make heads nor tails of your page.This is the simplest version i can give you using php<?php print '<input type="text" value="Search..." onclick="this.value=\'\'" />';?> Save it and see it work, i'll leave you to then integrate it into your code. Link to comment Share on other sites More sharing options...
virtualadz Posted June 4, 2006 Author Share Posted June 4, 2006 ok i took jonas code and it worked Link to comment Share on other sites More sharing options...
virtualadz Posted June 4, 2006 Author Share Posted June 4, 2006 hey but what if i wanted a global value for this, i.e. in my page there are quite a few forms and so setting js for each code is unnecessary and also is a arduous task. so can jonas post #3 code can be made such , that it can be used for many forms, as the <script> in that has Enter Search keywords... which cannot be the same for every form Link to comment Share on other sites More sharing options...
scott100 Posted June 4, 2006 Share Posted June 4, 2006 hey but what if i wanted a global value for this, i.e. in my page there are quite a few forms and so setting js for each code is unnecessary and also is a arduous task. so can jonas post #3 code can be made such , that it can be used for many forms, as the <script> in that has Enter Search keywords... which cannot be the same for every form<{POST_SNAPBACK}> I don't see why not, find out what form is clicked by passing an id or something and change it to whatever you want. Link to comment Share on other sites More sharing options...
virtualadz Posted June 5, 2006 Author Share Posted June 5, 2006 I don't see why not, find out what form is clicked by passing an id or something and change it to whatever you want. <{POST_SNAPBACK}> ok i will have a look at it.In addition to boen_robot's code, you might add a variable so that the field will not empty on a second focus:<script type="text/javascript">var toempty = true;function empty(){if (toempty) {document.getElementById('keywords').value='';toempty = false;}}</script><input id="keywords" type="text" size="30" name="keywords" onfocus="empty()" value="Enter words to search..." />i used jonas code , how do insert skym's, into it, so that the text doesn't disappear on a second click Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now