SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide/Show with a checkbox

    I am trying to have a check box toggle a set a forms between greyed-out and not, but Javascript is not my strong suit.

    Here's what I have so far:
    Code:
    <script>
    	function toggleView()	{
    		If(sign-up.addfeature == "TRUE")	{
    			sign-up.name.readonly = false;
    			sign-up.address.readonly = false;
    			featurearea.background-color = "";
    		} else {
    			sign-up.name.readonly = true;
    			sign-up.address.readonly = true;
    			featurearea.background-color = "#8f8f8f";
    		}
    	}
    </script>
    
    <form name="sign-up" method="post">
    	<input type="checkbox" name="addfeature" value="TRUE" onchange="javascript: toggleView();"><br>
    	<div id="featurearea">
    		<input type="text" name="name"><br>
    		<input type="text" name="address">
    	</div>
    </form>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using onfocus instead. For some reason it seems to suit the radio button better.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    <script type="text/javascript">
    	function toggleView() {
    		
    		var objName = getObject('name');
    		var objAddress = getObject('address');
    		var objFeatureBox = getObject('featurearea');
    		
    		objName.readOnly = !objName.readOnly;
    		objAddress.readOnly = !objAddress.readOnly;
    	
    		if (objFeatureBox.style.backgroundColor == "")
    			objFeatureBox.style.backgroundColor = "#8f8f8f";
    		else
    			objFeatureBox.style.backgroundColor = "";
    			
    	}
    	
    	function getObject(id){
    		var obj = null;
    		if (document.getElementById)
    			obj = document.getElementById(id);
    		else if
    			(document.all) obj = document.all[id];
    		
    		return obj;
    	}
    </script>
    
    <form name="sign-up" method="post">
    	<input type="checkbox" name="addfeature" value="TRUE" onclick="javascript:toggleView();"><br>
    	<div id="featurearea">
    		<input type="text" name="name"><br>
    		<input type="text" name="address">
    	</div>
    </form>

  4. #4
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help so fast!

    One question/problem: its doing the opposite

    Its greying out/readonly when checked instead of unchecked. I made some changes but its giving me errors.

    Thanks again.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  5. #5
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easy solution would be to set the checkbox to be checked to start with.

    Code:
    <input type="checkbox" name="addfeature" value="TRUE" onclick="javascript:toggleView();" checked>
    If you wanted to start off with the checkbox unchecked then set the 2 text inputs to readonly and the div background to grey.

    Or you could just determine whether the checkbox is checked and set the readonly and background attributes accordingly.

    Code:
    function toggleView2() {
    	
    	var objCheckbox = getObject('addfeature');
    	var objName = getObject('name');
    	var objAddress = getObject('address');
    	var objFeatureBox = getObject('featurearea');
    	
    	var readOnly;
    	var backgroundColor;
    	
    	if (objCheckbox.checked) {
    		readOnly = false;
    		backgroundColor = "";
    	}
    	else {
    		readOnly = true;
    		backgroundColor = "#8f8f8f";
    	}
    	
    	objName.readOnly = readOnly;
    	objAddress.readOnly = readOnly;
    
    	objFeatureBox.style.backgroundColor = backgroundColor;
    		
    }

    Edit: Fixed typo on readOnly var declaration.
    Last edited by shane; Mar 7, 2002 at 15:18.

  6. #6
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com


Bookmarks

Posting Permissions

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