Click to See Complete Forum and Search --> : checkbox determining display style(s)


hismightiness
11-14-2003, 12:42 PM
I have a text box contained in a form which I want to use to allow a textbox to be visible only when the checkbox is not checked. I want the checkbox to work both ways, when it is checked by someone, and when it is unchecked by someone. Here is what I have so far:
<script>
function changeIt(frmForm, obj_check, obj_text){
if(document.frmForm.obj_check.checked){
document.frmForm.getElementById(obj_text).visibility = 'hidden';
}else{
document.frmForm.getElementById(obj_text).visibility = 'visible';
}
}
</script>
I call the function like this:
<input type="checkbox" name="chkEMail" value="1" tabindex="7" id="chkEMail" onclick="changeIt('chkEMail','divEMail');">
Whenever I try calling the function, I get the following error:
'document.frmForm.obj_check' is null or not an object

Can anyone assist me, or point my in the right direction for an answer to my dilema, please?

demo
11-14-2003, 01:14 PM
hi

the problem is that in your function you specify three variables:


function changeIt(frmForm, obj_check, obj_text){


but when you run the code you only give two:


onclick="changeIt('chkEMail','divEMail');">


basicaly delete the first vaiable in the function:


function changeIt(obj_check, obj_text){


cheers

demo

hismightiness
11-14-2003, 02:28 PM
Oops! Actually, that is a typpo. I missed fixing it prior to cutting and pasting. I apologize. The third variable is being input as this.form.

Charles
11-14-2003, 02:34 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
textarea, .show {display:block}
.hide {display:none}
-->
</style>

<body onload="document.forms[0].area.className = 'hide'">

<form action="">
<div>
<label><input type="checkbox" onclick="this.form.area.className = this.checked ? 'show' : 'hide'">Other</label>
<textarea id="area"></textarea>
<button type="submit">Submit</button>
</div>
</form>

hismightiness
11-17-2003, 12:51 PM
Whoa!!! A gazillion points to you! How simple and sweet that was! I modified it a bit to suit my needs. The class method in this example interfered with my stylesheet restrictions, but this is great stuff!

I did this:
onclick="this.form.fieldname.style.display = this.checked ? 'none' : 'block'"

Many kudos to you. You are a lifesaver!

Charles
11-17-2003, 01:24 PM
Yours, however, is a non-standard Microsoft extension of the DOM that is nonetheless widely supported. You can change the class name but not the style directly. From the DOM Level 1 Specification:
The DOM Level 1 does not include mechanisms to access and modify style specified through CSS 1.
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html#ID-1176245063

hismightiness
11-17-2003, 03:23 PM
Yeah, I found that out with a previous project. However, I am lucky enough to be building this in a controlled environment (intranet). Thanks so much for your help!