Click to See Complete Forum and Search --> : Set bgColor of INPUT TYPE=TEXT field


mdixon
12-05-2002, 06:43 PM
I have a table of input type=text fields and I want to set the bgColor of each field onChange as the user enters values. For example when someone types a positive number into NUM01 below, I want function CC to set the background color of the text field to green, and if they enter a negative number I want the background to change to red. I have tried modeling this on DOM, eg. oBj.bgColor = "red" but no joy. How should I do this? Can it be done in both IE and NN? :confused:

<script language="JavaScript"> // code sample
<!--
function CC(oBj) { // Change the BGcolor of the Input Type=Text field (need help with this)
objVal = oBj.value;
if (objVal > 0) oBj.bgColor = "green" // Green +ve
else if (objVal < 0) oBj.bgColor = "red" // Red -ve
else oBj.bgColor = "white"; // white for 0
}
//-->
</script>
<!-- snip -->
<FORM METHOD="POST" ACTION=" ... "><table><tr>
<td><INPUT TYPE=TEXT NAME="NUM01" onChange="CC(this)"></td>
<td><INPUT TYPE=TEXT NAME="NUM02" onChange="CC(this)"></td>
<td><INPUT TYPE=TEXT NAME="NUM03" onChange="CC(this)"></td>
<!-- snip -->
</tr>
</table>

gil davis
12-05-2002, 06:56 PM
I have tried modeling this on DOM, eg. oBj.bgColor = "red"

What DOM is that? W3C DOM would be more like:

oBj.style.backgroundColor = "red"

Unless you are talking NS 4 DOM. That's pretty hopeless, though. There is no style support for individual form elements, and the bgColor only effects the surrounding background, not the actual whitespace that is inside the borders of the text field.

mdixon
12-05-2002, 07:30 PM
Originally posted by gil davis
oBj.style.backgroundColor = "red"

Fantastic, it works beautifully. Thanks Gil.

Will that also work with Netscape > 4? I will try that myself, but I have to get one and install it first.

gil davis
12-05-2002, 07:46 PM
NS 6+ and Mozilla should respond to that syntax, assuming your form elements are correctly nested inside <FORM></FORM> tags.

mdixon
12-05-2002, 11:40 PM
Originally posted by gil davis
NS 6+ and Mozilla should respond to that syntax, assuming your form elements are correctly nested inside <FORM></FORM> tags.
Thanks. Tried it in both NS & Mz - worked fine. Thanks for all the help.