Change textarea text color with checkbox and javascript
Just want to store a little javascript snippet. I needed to grey out the text in a text area depending on if a checkbox was checked or not. I’m sure there’s a way to get the function to be flexible enough so that it can be passed the specific parameters of WHICH form, WHICH checkbox, and WHICH textfield to grey out - but my usage was very limited, so I didn’t bother going further.
Here’s my function:
<script type="text/javascript">
function greyText() {
if (document.formname.showit.checked) {
document.formname.mytext.style.color = "#000";
} else {
document.formname.mytext.style.color = "#999";
}
}
</script>
And here’s my form and fields:
<form name="formname">
<input name="showit" type="checkbox" value="" onclick="greyText()" /> Show this paragrah
<textarea name="mytext" wrap="virtual" style="color:#999;">Lorem ipsum dolor sit amet no nummy blah blah blah....</textarea>
</form>
Here it is in action:
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)” />
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’)” />
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.
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…
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.
May 7th, 2004 at 11:58 am
Ah! Yes, with “Id” it works.
Thx!!
May 10th, 2004 at 9:31 am
Script snippet: Change textarea text color with checkbox and javascript…
May 11th, 2004 at 11:45 pm
I’m creating a proposal for a possible corporate client and…
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??