Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable a fieldset?

    So I have a form that lets me choose one of three templates to submit with. Each template is inside a <fieldset> tag. What I'd like to do is call disable ('fieldsetID') and have it disable the fieldset and all form fields inside it... I _thought_ disabling the fieldset would do that for me, but apparently not.

    Sooo, how would one go about doing this? I have this so far, and I think it's a decent start:

    Code:
    disable = function ()
    {
      for (i = 0; i < disable.arguments.length; i++)
      {
        // Is it an array of objects?
        if (typeof disable.arguments[i] == 'object')
        {
          for (j = 0; j < disable.arguments[i].length; j++)
          {
            disable.arguments[i][j].disabled = true;
          }
        }
        // Just an id
        else
        document.getElementById (disable.arguments[i]).disabled = true;
      }
    }
    
    disable (document.getElementById ('fieldset').childNodes);
    But it doesn't work, and it certainly doesn't disable form elements only.

    This is pretty much for Mozilla only, but an IE version would be cool if possible.

    Thanks for any guidance,
    Aaron

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Disable form elements</title>
    		<script type="text/javascript">
    			function disable(element)
    			{
    				var input = document.getElementById(element).getElementsByTagName("input");
    				for(var i = 0; i < input.length; i++)
    				{
    					input[i].setAttribute("disabled","true");
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form>
    			<fieldset id="disable_me">
    				<caption>Fieldset</caption>
    				<div>
    					<label>Radio 1</label>
    					<input type="radio">
    				</div>
    				<div>
    					<label>Radio 2</label>
    					<input type="radio">
    				</div>
    				<div>
    					<label>Radio 3</label>
    					<input type="radio">
    				</div>
    			</fieldset>
    		</form>
    	</body>
    	<script type="text/javascript">
    		window.onload = disable("disable_me");
    	</script>
    </html>

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm... There are textareas and selects too, but I'd imagine I could easily merge the arrays and loop through that. Guess using getElementByTagName's the best way, rather than checking type of _all_ the fieldsets' children.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow alternative DOM methods

    here's an alternative solution:
    PHP Code:
    <html>
    <
    head>
        <
    title>Disabled Specified Fieldset</title>
    </
    head>


    <
    body>

    <
    form>
        <
    fieldset id="my-fieldset">
            <
    legend>try this:</legend>
                   
            <
    label for="txtName">Name:</label><input name="txtName" id="txt1" type="text"/>
            <
    br/>
              <
    br/>
            <
    label for="txtPassword">Password:</label><input name="txtPassword" id="txt2" type="password"/>
              
              <
    br/>
              <
    br/>
              <
    label for="sltCareers">Careers:</label>
              <
    select name="sltCareers" id="slt1">
                  <
    option>Web Developer</option>
                        <
    option>Web Designer</option>
                        <
    option>Project Manager</option>
                        <
    option>Systems Analyst</option>
                        <
    option>Information Architect</option>         
              </
    select>
                   
            <
    br/>
              <
    br/>
            <
    label for="chkSkill[0]">Javascript:</label><input name="chkSkill[0]" id="chk1" type="checkbox" value="Javascript"/>
            <
    label for="chkSkill[1]">HTML:</label><input name="chkSkill[1]" id="chk2" type="checkbox" value="HTML"/>
            <
    label for="chkSkill[2]">CSS:</label><input name="chkSkill[2]" id="chk3" type="checkbox" value="CSS"/>
                   
            <
    br/>
              <
    br/>
            <
    input name="btnReset" id="btn1" type="reset" value="clear"/>
        </
    fieldset>
        
        <
    input name="btnToggle" id="btn2" type="button" value="toggle fieldset" onclick="toggleFieldset('my-fieldset')"/>
    </
    form>
    </
    body>



    <
    script type="text/javascript">

    // parameter can either be a string representing the id of the fieldset or it can be object-reference to the fieldset itself
    function toggleFieldset()
    {
        var 
    oNodeaElmsi=0;
        
        switch (
    typeof arguments[0])
        {
            case 
    "string"oNode=document.getElementById(arguments[0]); break;
              case 
    "object"oNode=arguments[0]; break;
              default: return;
        }
        
        if (
    aElms=oNode.childNodes)
        {    
            while (
    oFld aElms.item(i++))
            {
                  
    oFld.disabled = (oFld.nodeType==&& /^(input|select|button|textarea)$/i.test(oFld.nodeName) && oFld.disabled==false) ? true false ;    
            }
        }
    }


    // put in to ascertain that form fields are enabled
    window.onload
    {
        for (var 
    i=0document.forms[0].elements.lengthi++)
        {
            
    document.forms[0].elements[i].disabled=false;
        }
    }

    </script>
    </html> 
    hope that helps, too
    *keep it simple (TM)


  •  

    Posting Permissions

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