Form Checkbox show/hide Textarea

**Williamsun** · 07-28-2012, 09:04 PM

Hello, I am new here. I have found many code snippets on this site so I thought I'd go ahead and register and try to get some help.

I have found javascript snippets to show a form textarea on a checkbox/radio button click. The problem is it doesn't disappear when the checkbox is clicked again (unchecked), and if the page is refreshed, all the textareas start in the default hide state.

Here is what I'm working with:

Code:

<head>
<script type="text/JavaScript">
<!--
function show(id)
{
     if (document.getElementById(id).style.display == 'none')
     {
          document.getElementById(id).style.display = '';
     }
}
function hide(id)
{
          document.getElementById(id).style.display = 'none';
}
//-->
</script>
</head>

Code:

<body><form>
blahblahblah <input type="checkbox" name="something1" tabindex="84" onfocus="hide('Comments');show('Comments');"> 
<div id="Comments" style="display:none;">
more text
<textarea rows="5" name="something2" cols="64" tabindex="85" maxlength="1024" class="optional"></textarea>
</div>
</form></body>

One issue I know of is, I'm having to use a table for layout purposes in this form instead of all div ul li elements padded and margined in css.

Does anyone have a better javascript snippet link or know how I can modify this to get it to work the way I'm trying?

**TheAliveWinner** · 07-28-2012, 10:12 PM

See, if this helps!

HTML Code:

<!doctype html>
<html>
<head>
    <script>
        function toggle(id) {
            if (document.getElementById(id).style.display == 'none') {
                document.getElementById(id).style.display = 'block';
            } else {
                document.getElementById(id).style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <form>
        <input type="checkbox" onclick="toggle('Comments')"> <br/>
        before div
        <div id="Comments" style="display:none;">
            <textarea>insert text here</textarea>
        </div>
        after div
    </form>
</body>
</html>

This is a very basic script! A lot better can be done...!

**TheAliveWinner** · 07-28-2012, 10:15 PM

...and if the page is refreshed, all the textareas start in the default hide state.

To resolve this issue, you may use JavaScript cookies!

**Williamsun** · 07-28-2012, 11:10 PM

Thanks, that works fine!

I found this:
http://code.google.com/p/cookies/

Code:

//set
$.cookies.set( 'sessid', 'dh3tr62fghe' ); //A cookie by the name 'sessid' now exists with the value 'dh3tr62fghe'

//get
var sessid = $.cookies.get( 'sessid' ); //Variable 'sessid' now holds the value 'dh3tr62fghe'

Would this do the job, and where would I insert each, or how would I do it?

I have:

Code:

<head>
jquery-1.4.2.min.js
jquery.tools.min.js
</head>

**Williamsun** · 07-28-2012, 11:12 PM

Originally Posted by TheAliveWinner

To resolve this issue, you may use JavaScript cookies!

Thanks, that works fine!

I found this:
http://code.google.com/p/cookies/

Code:

//set
$.cookies.set( 'sessid', 'dh3tr62fghe' ); //A cookie by the name 'sessid' now exists with the value 'dh3tr62fghe'

//get
var sessid = $.cookies.get( 'sessid' ); //Variable 'sessid' now holds the value 'dh3tr62fghe'

Would this do the job, and where would I insert each, or how would I do it?

I have:

Code:

<head>
jquery-1.4.2.min.js
jquery.tools.min.js
</head>

**TheAliveWinner** · 07-29-2012, 11:51 AM

HTML Code:

<!doctype html>
<html>
<head>
	<script>
	/*\---This cookie script has been copied from "http://www.dustindiaz.com/top-ten-javascript/" and has exactly been posted here in its unaltered form! You are free to use it anywhere!---\*/
		var getCookie = function (name) {
			var start = document.cookie.indexOf( name + "=" );
			var len = start + name.length + 1;
			if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
				return null;
			}
			if ( start == -1 ) return null;
			var end = document.cookie.indexOf( ';', len );
			if ( end == -1 ) end = document.cookie.length;
			return unescape( document.cookie.substring( len, end ) );
		}
		var setCookie = function ( name, value, expires, path, domain, secure ) {
			var today = new Date();
			today.setTime( today.getTime() );
			if ( expires ) {
				expires = expires * 1000 * 60 * 60 * 24;
			}
			var expires_date = new Date( today.getTime() + (expires) );
			document.cookie = name+'='+escape( value ) + ( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
			( ( path ) ? ';path=' + path : '' ) + 
			( ( domain ) ? ';domain=' + domain : '' ) +
			( ( secure ) ? ';secure' : '' );
		}
		var deleteCookie = function ( name, path, domain ) {
			if ( getCookie( name ) ) document.cookie = name + '=' +
			( ( path ) ? ';path=' + path : '') +
			( ( domain ) ? ';domain=' + domain : '' ) +
			';expires=Thu, 01-Jan-1970 00:00:01 GMT';
		}
	/*\------------------------------------------------------The copied script ends here!------------------------------------------------------\*/
		var checkCookie = function (name) {
			var el_1 = document.getElementById('comments');
			var el_2 = document.getElementById('check');
			if (getCookie(name) == '') {
				el_1.style.display = '';
				el_2.checked = true;
			} else {
				el_1.style.display = 'none';
				el_2.checked = false;
			}
		}
		var toggle = function (obj) {
			var el = document.getElementById(obj);
			if (el.style.display != 'none') {
				el.style.display = 'none';
				setCookie('disp','none');
			} else {
				el.style.display = '';
				setCookie('disp','');
			}
		}
	</script>
</head>
<body onload="checkCookie('disp')">
	<form>
		<input type="checkbox" id="check" onclick="toggle('comments')"> <br/>
		before div
		<div id="comments">
			<textarea>insert text here</textarea>
		</div>
		after div
	</form>
</body>
</html>

**Williamsun** · 07-29-2012, 12:25 PM

Thanks a million.....again!

I know exactly squat about cookies, but once I get a nudge in the right direction I can finger the rest out purty quick. (I have to do all this for my manufacturing facility website, and I'm not a programmer.

)

Edit: One quick question after looking at the cookie code.

Code:

<!doctype html>

Does this denote html5, which may or may not cause issues with older browsers, or was this just your shorthand?

This is the top of my header.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Any problems before I start trial and error and error and error.....

Thank you.

**TheAliveWinner** · 07-29-2012, 01:21 PM

Yes!

HTML Code:

<!doctype html>

This is the DTD in HTML5.

You can replace it with yours!

**Williamsun** · 07-29-2012, 01:27 PM

Ok, thanks!

As you can see there are some things I'm not sure about, and the only way to find out is to ask. I'm seeing crosseyed from google searches trying to grind out this new order form. Thanks again.

Thread: Form Checkbox show/hide Textarea

Thread Tools

Display

Form Checkbox show/hide Textarea

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions