Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation changing the default textbox value to "" when clicked on

    Hi,

    I would like to know if it is possible to change the default value of a textbox to "" when it is clicked in, and when the page loads for the default value to be put back as the value of the textbox.

    is this possible to do in html or does it have to be javascript?

    this is the code i have tried
    Code:
    <input name="search"  onFocus="" type="text" value="search and compare" size="37" />
    cheers
    Luke

  • #2
    Regular Coder
    Join Date
    Dec 2008
    Posts
    116
    Thanks
    11
    Thanked 4 Times in 4 Posts
    you need the javascript code which is

    Code:
    <script type="text/javascript" language="javascript">
    //clear text box on click
    function clearText(field){
    
        if (field.defaultValue == field.value) field.value = '';
        else if (field.value == '') field.value = field.defaultValue;
    
    }
    </script>
    then add this at the end end your input

    Code:
    onfocus="clearText(this)" onblur="clearText(this)"

  • Users who have thanked The_Return for this post:

    LJackson (05-01-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate thanks for the quick reply

    where do i insert this code please?

    i have inserted it in the header and the body sections of my page but its not working, any ideas?

    cheers mate

    ignore this mate sorry missed the last piece of code.. oops
    Last edited by LJackson; 05-01-2009 at 12:04 AM.

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    thanks mate thats working a treat...

    how do i get the textbox value to reset if the page is refreshed as it is currently keeping the current information?

    thanks
    Last edited by LJackson; 05-01-2009 at 12:09 AM.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    I’ll have to chime in and strongly advocate the use of unobtrusive JavaScript! Refrain from using inline JS events! Not only makes it easier to apply or remove JS and associated functionality, it will also increase the ease of maintenance and makes your code a lot cleaner.

    So, use DOM manipulation to retreive the element and value in question and manipulate it from an external script. The easiest way would be to give your input element an ID and apply the effect with the following script:
    Code:
    window.onload = function() {
    	if (document.getElementById("inp_search")) {
    		var s = document.getElementById("inp_search");
    		var v = s.defaultValue;
    		s.onfocus = function() {if(s.value==v) s.value='';}
    		s.onblur= function() {if(s.value=='') s.value=v;}
    	}
    }
    The above example would assume that the input has an ID of “inp_search”. At first it’s checking if an element with ID “inp_search” exists at all and if yes it applies the function. This way no error will occur if the element doesn’t exist. This all is executed when the page has finished loading through window.onload. The advantage of this is that you can remove or add that script without having to change the HTML and/or causing issues or JS errors because as the name implies, the JS is unobtrusive and won’t get in the way of the HTML.

    There are a few better ways (keyword “DOM ready”) but this will do. Note that only one window.onload event can exist so if you have other scripts make sure they don’t interfere with each other.

    Remember: Always use unobtrusive JavaScript! In exceptional cases this can even be an internal script (i. e. a script in the head of the HTML document) but by all means avoid inline JS calls like <a onclick="…">

    Edit: Oh and by the way: Never ever use the language attribute. It’s deprecated, invalid, and unnecessary.
    Last edited by VIPStephan; 05-01-2009 at 06:58 PM.

  • Users who have thanked VIPStephan for this post:

    jlhaslip (05-30-2009)

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    VIP,

    Am I missing something here? (js newbie)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>js demo</title>
        <script type="text/javascript">
    window.onload = function() {
        if (document.getElementById("inp_search")) {
        var s = document.getElementById("search");
        var v = s.defaultValue;
        s.onfocus = function() {if(s.value==v) s.value='';}
        s.onblur= function() {if(s.value=='') s.value=v;}
        }
        }
        </script>
       
      </head>
      <body>
        <form action="">
          <input type="text" id="inp_search" name="search" value="Search...">
        </form>
      </body>
    </html>

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
     var s = document.getElementById("search");
    should be
    Code:
     var s = document.getElementById("inp_search");
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jlhaslip (05-01-2009)

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    That was going to be my next choice... :lol:

    Thanks for the fix.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Oops, sorry, I missed that one. I’ve edited my post above. Thanks for the heads up.

  • #10
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi guys

    sorry been away from this thread for a while as i was happy everything wqs working well which it was now ive come back and seen the discussion that has been going on about using using inline JS events so i have modified my code as suggested above its working fine but what i want to know is once the user has entered a value into the search bar how do i set it up so that when the user presses the enter key instead of clicking on a button it navigates to another page?

    here is my js code
    Code:
    	<script type="text/javascript" language="javascript">
    	window.onload = function() {
    	if (document.getElementById("searchbox")) {
    		var s = document.getElementById("searchbox");
    		var v = s.defaultValue;
    		s.onfocus = function() {if(s.value==v) s.value='';}
    		s.onblur= function() {if(s.value=='') s.value=v;}
    		}
    	}
    	</script>
    and here is my form code
    PHP Code:
        <div class="searchbar">
          <input name="searchbox" 
            type="text" 
            id="searchbox" 
            value="Search Here..." 
            size="35" 
            onfocus="onload(this)" 
            onblur="onload(this)"/>
          <label>
    <select name="category" id="category">
    <option value="Everything">All Items</option>
    <?php
    $optgroups
    =array('Entertainment'=>array('DVD','CD','Video Games''Blu-Ray''Books'),
                    
    'Computing'=>array('Desktop','Notebook','Netbook','Prnter','Scanner','Software','Accessories'),
                    
    'Electronics'=>array('LCD TVs','Plasma TVs','Full HD TVs','MP3 and D.A.P','Digital Cameras',' Home Cinema Systems','DVD Players'));
    foreach(
    $optgroups as $key=>$options){
     echo 
    "<optgroup label=\"$key\">";
          foreach(
    $options as $option){
            echo 
    "<option value=\"{$option}\">{$option}</option>";
            }
     echo 
    "<optgroup>";
    }

    ?></select>
     </label>
        </div>
        
        <div class="searchSubmit">
        <a href="http://www.kernow-connect.com">
        <img src="/images/gobutton.png" border="0" alt="Submit" title="Submit" /></a>
        </div>
          
        </div>
        </div>
    <?php }?>
    but once the user has finished entering a value and presses enter nothing happens wow do i set it up to link to price_results.php???

    please help
    thanks
    Luke

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    At first:

    Quote Originally Posted by LJackson View Post
    Code:
    <input name="searchbox" 
        	type="text" 
            id="searchbox" 
        	value="Search Here..." 
        	size="35" 
        	onfocus="onload(this)" 
        	onblur="onload(this)"/>
    This is wrong (the red part) so please remove that. As I said, unobtrusive JavaScript makes any inline JS calls unnecessary. You just have your HTML and your JS separate and you won’t have to care about modifying your HTML and screwing up anything important.

    Then I don’t see your form element? There you’d have to add the action:
    Code:
    <form action="price_results.php" method="get">
    And please remove language="javascript" from the script element.

  • #12
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Hi VIPStephan,

    thank you i was missing
    Code:
    <form action="price_results.php" method="get">
    its now working
    i have also removed all the other stuff you said to,

    thank you
    Luke

  • #13
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Hi VIPStephan,

    ok i have some ajax code which changes the data displayed within a div but it says it doesnt have an action tag which it doesent but im not sure what to include in the action tag???

    at the mo i have
    PHP Code:
    <form>
    <div class="storefilter">
    <b>Filter Brands By:</b>
    <select name="cds" onchange="showCD(this.value)">
    <?php
    $options
    =array('entertainment','computing','electronics','clothing''misc');
    foreach(
    $options as $option){
     if(isset(
    $_SESSION['page_category']) && $_SESSION['page_category']==$option)
      echo 
    "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
     else
      echo 
    "<option value=\"{$option}\">{$option}</option>"
    }
    ?>
    </select>
    </div>
    </form>
    which is using onchange which as you stared above shouldnt be used but how do i make this work with out the onclick would i just have the action link to the php file where the function is kept?

    cheers for your help,

    p.s im away for a few days so may not be able to respond for a while cheers

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    ok i have some ajax code which changes the data displayed within a div but it says it doesnt have an action tag which it doesent but im not sure what to include in the action tag???
    You need to adopt a progressive enhancement strategy for your pages. ie, they should serve the basic functionalities even in the absence of javascript or any other things.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate im back from my weekend away

    thats an interesting read above, which is very true and something i hadn't even considered up until now. with that being said, how do i solve my original problem and 2/ what would i need to do to make the page with this ajax code accessable to those with js turned off???

    thanks for the info
    Luke


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •