Checkboxes and onClick

[stwallace]

Could I possibly enlist your help for JavaScript coding. I'm trying to use a JavaScript that performs an onclick function for a checkbox.

When a user clicks on a checkbox, I would like for a textbox to display that will allow the user to input comments. I have a JavasScript that will do it but it will only allow me to add one script to the page. I need at least 6 of these checkboxes to one page.

Here is the example that works

<script>
function addControl() {
document.getElementById("myDiv").style.display="block";
}
</script>


<strong>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="C_Comment" class="text" onclick="addControl()" ></strong>

<div style="display:none;" id="myDiv">

<TEXTAREA wrap="virtual" class="Text" NAME="C_Evaluation" ROWS=4 COLS=68></textarea>


This example doesn't work

<script>
function addControl() {
document.getElementById("myDiv").style.display="block";
}
</script>

<script>
function addControl() {
document.getElementById("myPlan").style.display="block";
}
</script>

<strong>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="C_Comment" class="text" onclick="addControl()" ></strong>

<div style="display:none;" id="myDiv">

<TEXTAREA wrap="virtual" class="Text" NAME="C_Evaluation" ROWS=4 COLS=68></textarea>

<strong>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="P_Comment" class="text" onclick="addControl()" ></strong>

<div style="display:none;" id="myPlan">

<TEXTAREA wrap="virtual" class="Text" NAME="P_Evaluation" ROWS=4 COLS=68></textarea>[B]

Any help would be greatly appreaciated.

[Greelmo]

let me get this straight.... you want the user to click a checkbox and when it is clicked a text box will appear for input?

[stwallace]

Yes that's exactly what I want

[Vladdy]

<label>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="P_Comment" class="text" onclick="this.parentNode.nextSibling.style.display=this.checked?'':'none'" ></label><textarea wrap="virtual" name="P_Evaluation" rows="4" cols="68"></textarea>

Or if your text area does follow the checkbox immideately

<label>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="P_Comment" class="text" onclick="document.getElementById('P_Evaluation').style.display=this.checked?'':'none'" ></label>
<!--some HTML-->
<textarea wrap="virtual" name="P_Evaluation" rows="4" cols="68"></textarea>

[stwallace]

That's exactly what I'm looking for except I don't want the text box to appear until the user clicks the checkbox. Could I use display=this.block or display=this.unchecked

[stwallace]

I just tested the code. When I visit the page for the first time both the checkbox and textbox are there. When I click on the checkbox, the textbox remains. When I uncheck the checkbox, the textbox disappears and reappears when I recheck the checkbox. Is this the way the form is suppose to work?

I copied and pasted the code and removed the old code from the other script I was using to avoid a conflict. Could I be doing something else wrong?

When the user visits the page for the first time, they should see only the checkbox. When they click on the checkbox, the textbox would appear. When they uncheck the checkbox, the textbox would disappear. If it helps I am using Cold Fusion 5.0 for coding.

By the way, thanks to everyone for responding so quickly.

[md88]

In addition to the:

<label>Comment on this section (If &quot;No Comment&quot;, do nothing): <input type="checkbox" name="P_Comment" class="text" onclick="document.getElementById('P_Evaluation').style.display=this.checked?'':'none'"></label> <!--some HTML--> <textarea wrap="virtual" name="P_Evaluation" rows="4" cols="68"></textarea>

add:

onload="document.getElementById('P_Evaluation').style.display=this.checked?'':'none'"

to the 'body' tag. This should solve the problem.

- MD

[Vladdy]

Sorry, I forgot to add style="display:none" to the textarea to make the initial state hidden:

<label>Comment on this section (If "No Comment", do nothing): <input type="checkbox" name="P_Comment" class="text" onclick="this.parentNode.nextSibling.style.display=this.checked?'':'none'" ></label><textarea wrap="virtual" style="display:none" name="P_Evaluation" rows="4" cols="68"></textarea>

No need to use JS onload.

[stwallace]

Perfect. It worked like a charm. Thank you so much for all of your help and my boss thanks you.