www.webdeveloper.com
Results 1 to 9 of 9

Thread: Form Checkbox show/hide Textarea

  1. #1
    Join Date
    Jul 2012
    Posts
    20

    Form Checkbox show/hide Textarea

    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?

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    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...!
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  3. #3
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    ...and if the page is refreshed, all the textareas start in the default hide state.
    To resolve this issue, you may use JavaScript cookies!

  4. #4
    Join Date
    Jul 2012
    Posts
    20
    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>

  5. #5
    Join Date
    Jul 2012
    Posts
    20
    Quote Originally Posted by TheAliveWinner View Post
    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>

  6. #6
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    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>
    Last edited by TheAliveWinner; 07-29-2012 at 11:55 AM.
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  7. #7
    Join Date
    Jul 2012
    Posts
    20
    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.
    Last edited by Williamsun; 07-29-2012 at 12:40 PM.

  8. #8
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Yes!
    HTML Code:
    <!doctype html>
    This is the DTD in HTML5.

    You can replace it with yours!

  9. #9
    Join Date
    Jul 2012
    Posts
    20
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles