changing bg color of form elements with Javascript

shun · July 1st, 2003, 10:24 PM

ok heres wht im trying to do just so you know where its going

a from element has some default text such as "your name here" and initially the element has a background color of grey, i dont know the exact hex code off hand. onFocus, the text goes away and the background becomes white, as if the element is being highlighted. if the user enters test into the element, it becomes transparent, and the users entered text stays there, if not, the element returns to the original grey and the original text returns.

anyway, im pretty sure i can figure out the rest, I have most of it done already, if i can find out how to change the background color of a form element. is it possible? does anyone know how to do it?

im gonna keep playing with it so if i figure out before someone else can, ill let everyone know.

XtremeDesigns · July 2nd, 2003, 1:23 AM

this is data contained in one of my style sheets for form input, and other, fields. just add STYLE="stuffhere" inside the element's tag.

Code:

input, textarea, select {
	font-family: Verdana; 
	font-size: x-small; 
	background-color: #888877; 
	border: 1px solid #777777;
	color: #000000;
}

shun · July 2nd, 2003, 1:49 AM

right i have exact same stuff in my style sheet, what im wondering is, is it possible to change those elements with javascript commands, thanks for the help but you misunderstood me or something

websterworlds.com · July 2nd, 2003, 7:33 AM

why not add another style in your style sheet and use it for the form?
that way you don't have to change anything, thats the idea of them sheets ya know B) and I don't think you can use java like that...

shun · July 2nd, 2003, 1:58 PM

ok thanks

**EliteGeeks.com** · July 2nd, 2003, 2:10 PM

yes javascript can do it, however you need to know javascripting.
Off hand I don't know the script but if you really need it in javascript it can be done. Java and javascripting can do almost anything that HTML can do as well as most other internet languages

shun · July 2nd, 2003, 2:23 PM

im pretty good with getting java to do what i want if know what im doing, but in this case I don't know what I am doing which is where the problem comes in. i need to get myself a good java reference book ill probably pick it up tonight on my way back from class so i can solve this problem. any suggestions?

shun · July 2nd, 2003, 3:20 PM

ok i got it to work. let me know what you think of the effect if you dont mind.

http://www.whythingssuck.com/submit.shtml

and heres how i did it for the name field, other fields are done in a similar manner

function focname()
{

//make element background white
document.submitform.name.style.backgroundColor="wh ite";

if(document.submitform.name.value=="your name here")
{
//clear text if default text remains

document.submitform.name.value="";

}

}

function blurname()
{

//check if element has been altered
if(document.submitform.name.value=="")
{

//return element to gray and return value to default
document.submitform.name.value="your name here";
document.submitform.name.style.backgroundColor="#c fcfcf";
}

else
{
//make element transparent
document.submitform.name.style.backgroundColor="tr ansparent";
}

}

**EliteGeeks.com** · July 2nd, 2003, 3:26 PM

Does this help?

Example code:

<html>
<body bgcolor="#306090" Text="#FFFFFF">
<form>
<input id="first" type="text" size="20"
onFocus="this.style.backgroundColor='#D0E0F0'"
onBlur="this.style.backgroundColor='#FFFFFF'">
<input id="second" type="text" size="15"
onFocus="this.style.backgroundColor='#D0E0F0'"
onBlur="this.style.backgroundColor='#FFFFFF'">
<input id="third" type="password" size="12"
onFocus="this.style.backgroundColor='#D0E0F0'"
onBlur="this.style.backgroundColor='#FFFFFF'">
</form>
</body>
</html>

Or Changing the color of a form element when it's blank - Source Code:

<script language="JavaScript" type="text/javascript">

</script>

<form action="../">
<textarea rows="4" cols="40"
onclick="checkPink(this)"
onfocus="checkPink(this)"
onblur="checkPink(this)"
onchange="checkPink(this)">Delete this copy to make this pink</textarea>
<input size="30"
onclick="checkPink(this)"
onfocus="checkPink(this)"
onblur="checkPink(this)"
onchange="checkPink(this)"
value="Delete this copy to make this pink">
</form>

July 1st, 2003, 10:24 PM	#1 (permalink)
shun Registered User Seasoned Poster Joined in May 2003 60 posts Gave thanks: 0 Thanked 0 times	ok heres wht im trying to do just so you know where its going a from element has some default text such as "your name here" and initially the element has a background color of grey, i dont know the exact hex code off hand. onFocus, the text goes away and the background becomes white, as if the element is being highlighted. if the user enters test into the element, it becomes transparent, and the users entered text stays there, if not, the element returns to the original grey and the original text returns. anyway, im pretty sure i can figure out the rest, I have most of it done already, if i can find out how to change the background color of a form element. is it possible? does anyone know how to do it? im gonna keep playing with it so if i figure out before someone else can, ill let everyone know. __________________ "if that cant take a joke, f*** em" - tucker max why things suck

July 2nd, 2003, 1:23 AM	#2 (permalink)
XtremeDesigns Registered User Seasoned Poster Joined in May 2003 Lives in Ottawa, Ontario, Canada 80 posts Gave thanks: 0 Thanked 0 times	this is data contained in one of my style sheets for form input, and other, fields. just add STYLE="stuffhere" inside the element's tag. Code: input, textarea, select { font-family: Verdana; font-size: x-small; background-color: #888877; border: 1px solid #777777; color: #000000; }

July 2nd, 2003, 1:49 AM	#3 (permalink)
shun Registered User Seasoned Poster Joined in May 2003 60 posts Gave thanks: 0 Thanked 0 times	right i have exact same stuff in my style sheet, what im wondering is, is it possible to change those elements with javascript commands, thanks for the help but you misunderstood me or something __________________ "if that cant take a joke, f*** em" - tucker max why things suck

July 2nd, 2003, 1:58 PM	#5 (permalink)
shun Registered User Seasoned Poster Joined in May 2003 60 posts Gave thanks: 0 Thanked 0 times	ok thanks __________________ "if that cant take a joke, f*** em" - tucker max why things suck

July 2nd, 2003, 2:10 PM	#6 (permalink)
EliteGeeks.com Surpass Fan Excelling Contributor Joined in May 2003 Lives in Las Vegas, Nevada Hosted on Dime9 632 posts Gave thanks: 0 Thanked 0 times	yes javascript can do it, however you need to know javascripting. Off hand I don't know the script but if you really need it in javascript it can be done. Java and javascripting can do almost anything that HTML can do as well as most other internet languages __________________ Disclamer: This is not a legal document. As with all information transfered via the internet, this message was subject to possible contamination and tampering I hold myself harmless as to its content as at appears at its intended destination.

July 2nd, 2003, 7:33 AM	#4 (permalink)
websterworlds.com Registered User Comfy Contributor Joined in May 2003 Lives in ISREAL 258 posts Gave thanks: 0 Thanked 0 times	why not add another style in your style sheet and use it for the form? that way you don't have to change anything, thats the idea of them sheets ya know B) and I don't think you can use java like that...

July 2nd, 2003, 2:23 PM	#7 (permalink)
shun Registered User Seasoned Poster Joined in May 2003 60 posts Gave thanks: 0 Thanked 0 times	im pretty good with getting java to do what i want if know what im doing, but in this case I don't know what I am doing which is where the problem comes in. i need to get myself a good java reference book ill probably pick it up tonight on my way back from class so i can solve this problem. any suggestions? __________________ "if that cant take a joke, f*** em" - tucker max why things suck

July 2nd, 2003, 3:20 PM	#8 (permalink)
shun Registered User Seasoned Poster Joined in May 2003 60 posts Gave thanks: 0 Thanked 0 times	ok i got it to work. let me know what you think of the effect if you dont mind. http://www.whythingssuck.com/submit.shtml and heres how i did it for the name field, other fields are done in a similar manner function focname() { //make element background white document.submitform.name.style.backgroundColor="wh ite"; if(document.submitform.name.value=="your name here") { //clear text if default text remains document.submitform.name.value=""; } } function blurname() { //check if element has been altered if(document.submitform.name.value=="") { //return element to gray and return value to default document.submitform.name.value="your name here"; document.submitform.name.style.backgroundColor="#c fcfcf"; } else { //make element transparent document.submitform.name.style.backgroundColor="tr ansparent"; } } __________________ "if that cant take a joke, f*** em" - tucker max why things suck

July 2nd, 2003, 3:26 PM	#9 (permalink)
EliteGeeks.com Surpass Fan Excelling Contributor Joined in May 2003 Lives in Las Vegas, Nevada Hosted on Dime9 632 posts Gave thanks: 0 Thanked 0 times	Does this help? Example code: <html> <body bgcolor="#306090" Text="#FFFFFF"> <form> <input id="first" type="text" size="20" onFocus="this.style.backgroundColor='#D0E0F0'" onBlur="this.style.backgroundColor='#FFFFFF'"> <input id="second" type="text" size="15" onFocus="this.style.backgroundColor='#D0E0F0'" onBlur="this.style.backgroundColor='#FFFFFF'"> <input id="third" type="password" size="12" onFocus="this.style.backgroundColor='#D0E0F0'" onBlur="this.style.backgroundColor='#FFFFFF'"> </form> </body> </html> Or Changing the color of a form element when it's blank - Source Code: <script language="JavaScript" type="text/javascript"> <!-- function checkPink(obj) { if (obj.value=='') { if ((document.all)\|\|(document.getElementById)) { obj.style.backgroundColor = '#FF99CC'; } } else { if ((document.all)\|\|(document.getElementById)) { obj.style.backgroundColor = '#FFFFFF'; } } } //--> </script> <form action="../"> <textarea rows="4" cols="40" onclick="checkPink(this)" onfocus="checkPink(this)" onblur="checkPink(this)" onchange="checkPink(this)">Delete this copy to make this pink</textarea> <input size="30" onclick="checkPink(this)" onfocus="checkPink(this)" onblur="checkPink(this)" onchange="checkPink(this)" value="Delete this copy to make this pink"> </form> __________________ Disclamer: This is not a legal document. As with all information transfered via the internet, this message was subject to possible contamination and tampering I hold myself harmless as to its content as at appears at its intended destination.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search