scriptygoddess

1 | Jennifer

May 7th, 2004 at 9:01 am

Here's a more "flexible" function:

<script type="text/javascript">
function greyText(chboxname, textareaname) {
if (chboxname.checked) {
textareaname.style.color = "#000";
} else {
textareaname.style.color = "#999";
}
}
</script>

Called like this

<input name="showit" type="checkbox" value="" onclick="greyText(document.myformname.showit,document.myformname.mytext)" />

2 | Jennifer

May 7th, 2004 at 9:09 am

getting there… I think this is even better:

<script type="text/javascript">
function greyText(chboxname, textareaname) {
if (document.myformname[chboxname].checked) {
document.myformname[textareaname].style.color = "#000";
} else {
document.myformname[textareaname].style.color = "#999";
}
}
</script>

checkbox calls it like this:

<input name="showit" type="checkbox" value="" onclick="greyText('showit','mytext')" />

3 | jayseae

May 7th, 2004 at 10:03 am

Instead of changing the color, you may want to change the disabled method instead, so that it actually can't be used. Something like this should work:

document.getElementById(textareaname).disabled = !(document.getElementById(chboxname).checked);

In other words, set the disabled attribute to the opposite of the checked value. If checked, disabled is false (ie, it works). If not checked, disabled is true (it works). The getElementById is just what I use for xhtml compatibility. You can use it if you add an "id" attribute to your fields. Otherwise your code will be fine – just change the method from .style to .disabled.

4 | Jennifer

May 7th, 2004 at 10:55 am

jayseae – am I doing something wrong – or will that code just not work in firefox?

It probably isn't a big deal, most of the people using the page I'm working on right now, will almost certainly be on IE, but I was just wondering…

5 | jayseae

May 7th, 2004 at 11:17 am

It ought to work in Firefox – I actually took it out of an extension I wrote for Firefox and changed it to your field names.

As is, it requires IDs on your fields. So as long as you have id="mytext" and id="showit" in the appropriate places, it should work fine. You can even do without the function by doing it like this:

<form name="formname">
<input id="showit" checked="checked" name="showit" type="checkbox" onclick="document.getElementById('mytext').disabled = !(this.checked);" /> Show this paragraph<br />
<textarea id="mytext" name="mytext" wrap="virtual" style="color:#000;">Lorem ipsum dolor sit amet no nummy blah blah blah….</textarea>
</form>

Note the id attribute on each field, and also the checked attribute on the checkbox. Otherwise it will start off un-checked, and you won't be able to see a difference when you check it.

6 | Jennifer

May 7th, 2004 at 11:58 am

Ah! Yes, with "Id" it works.
Thx!!

7 | meghan's dolphin

May 10th, 2004 at 9:31 am

Daily Dose of Development
Script snippet: Change textarea text color with checkbox and javascript…

8 | Code Novice

May 11th, 2004 at 11:45 pm

Scripty's Text Area Twofer
I'm creating a proposal for a possible corporate client and…

9 | Ed

October 25th, 2004 at 4:36 am

It is possible to access an object with an id attribute. But!!!
Is it possible to change the id attribute's value in javascript code??