check box hidden/visible

[karla-gPZprz]

Hi there...

I have been reading a lot of posts about enabling/disabling check box and so far I have not found what I need to do.  It is a very simple action and I just can't figure out what to do:

I have a check box and a text box.

Initially, the text box is hidden (style"visibility"hiddent").

UNTIL When the check box is checked, text box should appear to be filled in.

Otherwise, text box stays hidden.

I used the style attribute because "Disabling" the text box didn't work.  One can still type in something even if the check box was not filled in.

I was wondering if this could happen on the client side?

Please advise.

Thanks,

Karla

[Guest]

This might help for a textarea

http://www.w3schools.com/TAGS/att_textarea_readonly.asp

For an input

http://www.w3schools.com/TAGS/att_input_readonly.asp

readonly is the attribute you are looking for I believe.

Byron Mann

mannb@hostmysite.com

byronosity@gmail.com

Software Architect

hosting.com | hostmysite.com

http://www.hostmysite.com/?utm_source=bb

[karla-gPZprz]

Hi Byron,

Thanks for the suggestion, but it is not what I am looking for.

Read-only still let's one enter data even if the checkbox is empty.

I'm using CF MX and I have a checkbox using cfinput.  When this box is checked, I want the visibility of the related text box to be "Visible" and ready for input by a user.  Otherwise, it stays hidden.

Any other suggestions?

Thanks,

Karla

[mack_]

You can use jQuery to show/hide the textbox or even plain js:

<input type="checkbox" onclick="if(
document.getElementById('t123').style.visibility=='hidden' ){
document.getElementById('t123').style.visibility='visible'; } else
{document.getElementById('t123').style.visibility='hidden'}">
<input type="text" name="t123" id="t123" style="visibility:hidden;"/>

Using jQuery it's the behavior is separated more clearly from your

markup and it's something like this:

$(function(){
	$("#id_of_your_checkbox").click(function(){
		$("#t123").toggle();
	});
})

Mack

[Dan_Bracuk]

In what way did disabling the text box not work?

[karla-gPZprz]

I apologize for not replying sooner.  "disabling the text box not work" means that users can click on the input box and type information even if the box is supposedly disabled.

Thanks.

[Dan_Bracuk]

Disabling the text box is better than hiding it.  If you thought you disabled it and didn't, you didn't do it properly.  Google "javascript disable textbox" for code samples that work.

[BKBK]

users can click on the input box and type information even if the box is supposedly disabled.

That is a contradiction. An input box is said to be disabled if users cannot type information in it.

[BKBK]

<form>
<input type="text" id="txt_id" name="txt" style="visibility:hidden">
<br>
<input type="checkbox" name="chkbx" name="chkbx_id" onclick="hide_n_show()">
</form>

<script type="text/javascript">
function hide_n_show() {
if(document.getElementById('txt_id').style.visibility == "hidden") {
     document.getElementById('txt_id').style.visibility = "visible";
}
else {
     document.getElementById('txt_id').style.visibility = "hidden";
}
}
</script>