change background color of inputbox

vickriz · June 30th, 2003, 10:06 PM

hi again to all and good day.

is there anyone can help me how to code in javascript for changing the background color of inputbox.

let say i have 2 checkbox a YES and NO. if the user check NO. then my inputbox fields will change the background color so it will distinguish as disabled fields. can you give me some sample codes?

thanks in advance..

Mabuhay!!!

pgtips · July 1st, 2003, 03:14 AM

The syntax you need to change the background colour is:
object.style.backgroundColor = New_Color

here's a simple example for you:

Code:

<html>
<head>
<script type="text/javascript" language="javascript">
function changeColour()
{
  if (document.frmSurvey.fld2.checked)
  {
    document.frmSurvey.fld1.style.backgroundColor="#FF0000"; // red
  }
  else
  {
    document.frmSurvey.fld1.style.backgroundColor="#FFFFFF"; // white
  }
}
</script>
</head>
<body>
<form name="frmSurvey" id="frmSurvey">
<input type="text" name="fld1" id="fld1"><br>
<input type="checkbox" name="fld2" id="fld2" onclick="changeColour()">change colour<br>
</body>
</html>

vknowles · July 1st, 2003, 09:36 AM

If you want a standard color and you know its name, you can also use

....backgroundColor="red";

There are many named colors that will work.

-Van

-Van
(Old dog learning new tricks...)

irProject · December 1st, 2009, 02:22 AM

--------------------------------------------------------------------------------

Hello,
You can perform it using jQuery. Are you familiar with jQuery?
It is a javascript library that enables you to any visual tasks like dragging windows, made any picture rounded, etc.
for example notice following:
$("div > p").css("background","#0C0C0C");
this means that change "background" propery of every "p" tag that is nested into a "div" tag, to "#0C0C0C".

I put some files in my blog for you. by these you can learn to perform what you wanted and other things.

http://aspnet35.brinkster.net/beetle...i-20090115.chm

http://aspnet35.brinkster.net/beetle...ery-1.2-v1.chm

http://aspnet35.brinkster.net/beetle_jaipur/jquery.js

http://aspnet35.brinkster.net/beetle...uery.corner.js

jquery.js in main javascript library. you can even get a link from Google servers.