Important alert: (current site time 7/15/2013 10:40:48 PM EDT)
 

VB icon

CSS/VBScript change background-color of txt-fields after type in

Email
Submitted on: 3/23/2001 8:38:05 AM
By: Mathias Stocker  
Level: Beginner
User Rating: By 4 Users
Compatibility: ASP (Active Server Pages), HTML, VbScript (browser/client side)
Views: 32290
 
     A real good way to show wich txtfields are required in a form! If you type in some stuff in the txtfield, the color change. In the example the color change from red to green.

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
 
Terms of Agreement:   
By using this code, you agree to the following terms...   
  1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
  2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
  3. You may link to this code from another website, but ONLY if it is not wrapped in a frame. 
  4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.
				
'**************************************
' Name: CSS/VBScript change background-color of txt-fields after type in
' Description:A real good way to show wich txtfields are required in a form!
If you type in some stuff in the txtfield, the color change. 
In the example the color change from red to green.
' By: Mathias Stocker
'
' Assumes:Works only in IE but you dont get a Failure msg or something like that in NS
Create a Textfield like
<input type="text" style="background-color:#FF0000;color:#FFFFFF" onchange="OC(T1)" name="T1" size="20">
Be sure that you've the name of the textfield inonchange="OC(T1)"(Here T1)
Put the following Script in the Body-Section of your Page
>>>>>>>>>> 
PS: You can use every css attribute if you like to change not only the colors!
If you dont know the Scripting Version for the css attributes (for example html: style="BACKGROUND-COLOR:#FFFFFF" scripting: style.backgroundcolor="#FFFFFF") you will find it under http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
If you like this easy small script then please vote for me!
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=6546&lngWId=4'for details.'**************************************

<SCRIPT Language = "vbscript">
Function OC(object)
if len(object.value)>0 then
object.style.backgroundcolor="#00FF00"
object.style.color="#000000"
else
object.style.backgroundcolor="#FF0000"
object.style.color="#FFFFFF"
end if
End Function
</SCRIPT>


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Beginner category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments

3/23/2001 3:08:02 PMFrank

Nice code. It's good for some of our business forms.
(If this comment was disrespectful, please report it.)

 
7/10/2001 5:54:07 AMSteve

Error messages on IE on Macs
(If this comment was disrespectful, please report it.)

 
5/8/2002 5:58:26 AMYola

len(object.value) are not working properly.
It says - Runtime error occurred.
Syntax error
(If this comment was disrespectful, please report it.)

 
5/8/2002 6:24:05 AMYola

Oh, sorry, all works out fine.
But user must change focus for color be changed. It's not good.

(If this comment was disrespectful, please report it.)

 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.