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.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Where is the error in this script?

    Hi!

    I have problem with this script - it should toggle background image of a textbox on focus and blur events (checking whether textbox value is "").
    I keep getting "Object does not support this property" error.

    I would appreciate your help.
    Bostjan

    See code below and images in the attachment.
    Code:
    <SCRIPT>
    function sh_box(hide) {
    	txtBox1 = document.test.getElementByID("txtBox");
    	if(hide == "true")
    		txtBox1.style.backgroundImage = "url(image_on.gif)";
    	else
    		txtBox1.style.backgroundImage = (txtBox1.value == "" ? "url(image_on.gif)" : "url(image_off.gif)");
    	}
    </SCRIPT>
    <form method="POST" action="" name="test">
    	<p>
    	<input type="text" name="txtBox" size="60" style="background-image: url('image_off.gif') " onFocus="sh_box('true');" onBlur="sh_box('false');"></p>
    </form>
    Attached Thumbnails Attached Thumbnails Where is the error in this script?-image_off.gif   Where is the error in this script?-image_on.gif  

  • #2
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Does this suit your wish ?


    Code:
    <style>
    #off{background-image: url('image_off.gif');}
    #on {background-image:url('image_on.gif');}
    </style>
    
    <form method="POST" action="" name="test">
    	<input type="text" name="txtBox" id="off" size="60" onFocus="document.forms[0].txtBox.id='on'" 
    onBlur="document.forms[0].txtBox.id='off'">
    </form>
    Last edited by iota; 08-12-2005 at 10:19 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, iota.

    Your code generally does what I need, except for I thing: on blur event background image should't be automatically changed back to start image if there is some text in the text box.

    Bostjan

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Location
    South Africa
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Hey Bostjan, Think this is what you looking for?

    <SCRIPT>
    function sh_box(hide) {

    var oTextBox = document.getElementById("txtBox");
    if(hide == "true")
    oTextBox.style.backgroundImage="url('image_on.gif')";
    else
    oTextBox.style.backgroundImage = (oTextBox.value == "" ? "url(image_on.gif)" : "url(image_off.gif)");
    }
    </SCRIPT>
    <form method="POST" action="" name="test" ID="Form1">

    <input type="text" id="txtBox" name="txtName" size="60" style="background-image: url('image_off.gif') "
    onFocus="sh_box('true');" onBlur="sh_box('false');" >
    </form>

  • #5
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sorry, I've misunderstood your wish.
    Hope this will surely meets your need.


    Code:
    
    <style>
    #off{background-image: url('image_off.gif');}
    #on {background-image:url('image_on.gif');}
    </style>
    
    <script>
    
    function checktxt() {
    
    	if (document.forms[0].txtBox.value == "")
    
     	 {
    		
    		document.forms[0].txtBox.id='off'
       	}
    
    	  else 
    
     	{
    		document.forms[0].txtBox.id='on'
     	}
    
      }
    
    </script>
    <form method="POST" action="" name="test">
    	<input type="text" name="txtBox" id="off" size="60" onFocus="document.forms[0].txtBox.id='on'" onBlur="checktxt()">
    </form>

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks to both. It now works fine.

    Bostjan


  •  

    Posting Permissions

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