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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Expandable Checkboxes Restricted Based On Choice

    Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice.

    This is my criteria:

    If someone chooses checkbox number 1, they cannot choose any other checkbox.
    If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below.
    If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below.
    If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below.

    One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed.

    I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work.

    Does anyone know how to accomplish all of this? Thank you in advance!
    Attached Files Attached Files

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    I don't really understand the caveat - a text area grows as space is required. But maybe this is a start...

    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" />
    <title>Test</title>
    </head>
    <body>
    <style>
    .divs {
    display:none;
    }
    </style>
    <form name="myform" onclick="checkBoxes()">
    <input type="checkbox" id="cb1" />box 1 <br>
    <input type="checkbox" id="cb2" />box 2 <br>
    <input type="checkbox" id="cb3" />box 3 <br>
    <input type="checkbox" id="cb4" />box 4 <br>
    </form>
    
    <div id="div1" class="divs">Please answer this question:<br>
    <input type="text" id="tbox" style="width:400px"></input>
    </div>
    <div id="div2" class="divs">Please answer this question:<br>
    <textarea rows="2" cols="30"></textarea>
    </div>
    <script type="text/javascript">
    
     function checkBoxes() {
     el=document.forms[0].elements[0].form.elements;
        for (var i = 0; i < document.forms[0].elements.length; i++) {
    		if ((el[i].getAttribute('type') == 'checkbox')&&(el[i].checked==true)) {
    		box=i;
    	}	
    }
    switch(box) {
    	case 0:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    break; 
    	case 1:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div2').style.display="block";
    break;
    	case 2:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div1').style.display="block";
    break
    	case 3:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div1').style.display="block";
    break;
    	}
    }
    </script>	  
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, thanks for replying back. I had found some examples similar to what you posted, but was not able to successfully incorporate it into what I already had.

    Sorry about not explaining the caveat properly. What I meant was this:

    I have 3 lines of two fields. "name" and "reason no to". If somebody needed to add 4 or more names/reason not to, they would need another line added after line number 3. So, I would want to give them a button or something to click to dynamically add additional lines as they needed them.

    I hope that was clearer.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    but if you want the user to be able to change their mind after they've checked a box, it would go something like this:

    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" />
    <title>Test</title>
    </head>
    <body>
    <style>
    .divs {
    display:none;
    }
    </style>
    <form name="myform" onclick="checkBoxes()">
    <input type="checkbox" id="cb1"/>box 1 <br>
    <input type="checkbox" id="cb2"/>box 2 <br>
    <input type="checkbox" id="cb3"/>box 3 <br>
    <input type="checkbox" id="cb4"/>box 4 <br>
    </form>
    
    <div id="div1" class="divs">Please answer this question:<br>
    <input type="text" id="tbox" style="width:400px"></input>
    </div>
    <div id="div2" class="divs">Please answer this question:<br>
    <textarea rows="2" cols="30"></textarea>
    </div>
    <script type="text/javascript">
     
     function checkBoxes() {
     var box;
     document.getElementById('div1').style.display="none";
     document.getElementById('div2').style.display="none";
     el=document.forms[0].elements[0].form.elements;
        for (var i = 0; i < document.forms[0].elements.length; i++) {
    	el[i].disabled=false;
    		if ((el[i].getAttribute('type') == 'checkbox')&&(el[i].checked==true)) {
    		box=i;
    	}	
    }
    
    switch(box) {
    	case 0:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    break; 
    	case 1:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div2').style.display="block";
    break;
    	case 2:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div1').style.display="block";
    break
    	case 3:
    	el[0].disabled=true;
    	el[1].disabled=true;
    	el[2].disabled=true;
    	document.getElementById('div1').style.display="block";
    break;
    		}
    }
    </script>	  
    </body>
    </html>

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    I get it now. Kind of like this?

    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" />
    <title>Test</title>
    </head>
    <body>
    <style>
    .divs {
    display:none;
    }
    </style>
    <form name="myform" onclick="checkBoxes()">
    <input type="checkbox" id="cb1"/>box 1 <br>
    <input type="checkbox" id="cb2"/>box 2 <br>
    <input type="checkbox" id="cb3"/>box 3 <br>
    <input type="checkbox" id="cb4"/>box 4 <br>
    </form>
    
    <div id="div1" class="divs">Please answer this question:<br>
    <input type="text" id="tbox" style="width:400px"></input>
    </div>
    <div id="div2" class="divs">Please answer this question:<br>
    <input type="text" style="width:400px"></input><input type="button" value="Add more names" onclick="addNames()">
    </div>
    <script type="text/javascript">
     
     function checkBoxes() {
     var box;
     document.getElementById('div1').style.display="none";
     document.getElementById('div2').style.display="none";
     el=document.forms[0].elements[0].form.elements;
        for (var i = 0; i < document.forms[0].elements.length; i++) {
    	el[i].disabled=false;
    		if ((el[i].getAttribute('type') == 'checkbox')&&(el[i].checked==true)) {
    		box=i;
    	}	
    }
    
    switch(box) {
    	case 0:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    break; 
    	case 1:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div2').style.display="block";
    break;
    	case 2:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div1').style.display="block";
    break
    	case 3:
    	el[0].disabled=true;
    	el[1].disabled=true;
    	el[2].disabled=true;
    	document.getElementById('div1').style.display="block";
    break;
    		}
    }
    
    function addNames() {
    var thediv=document.getElementById('div2');
    var extras=document.createElement('div');
    extras.innerHTML='<input type="text" style="width:400px"></input>'
    thediv.appendChild(extras);
    }
    </script>	  
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This was the code that I found and tried to incorporate into my page, but any changes that I made to it, broke it.

    Code:
    <html>
    <head>
    <script>
    function enableDisable(){
    var disable = true;
    var arglen = arguments.length;
    var startIndex = 0;
    var frm = document.example1;//change appropriate form name
    if (arglen>0){
    if (typeof arguments[0]=="boolean") {
    disable=arguments[0];
    if (arglen>1) startIndex=1;
    }
    for (var i=startIndex;i<arglen;i++){
    obj = eval("frm."+arguments[i]);
    if (typeof obj=="object"){
    if (document.layers) {
    if (disable){
    obj.onfocus=new Function("this.blur()");
    if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
    }
    else {
    obj.onfocus=new Function("return");
    if (obj.type=="text") obj.onchange=new Function("return");
    }
    }
    else obj.disabled=disable;
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <form name="example1">
    Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this.checked,'text1','checkbox1','select1')">
    <br>
    Text Field: <input type="text" name="text1">
    <br>
    Check box: <input type="checkbox" name="checkbox1">
    <br>
    Select: <select name="select1">
    <option></option>
    </select>
    </form>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    YES! That would be perfect! Can you help me incorporate that into what I already had?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    mmm... feeling a little lazy today and I should actually do some work...

    why don't you try to incorporate it and if you have a problem post back?

  • #9
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not anywhere as coding savvy as you and I'm not sure that I really understand how you've done this, but I'm giving it a shot.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    Quote Originally Posted by GG29
    I'm giving it a shot.
    that's how I "learnt"

  • #11
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So close, yet so far. I'm trying but the behavior is not as expected so I'm evidently making errors somewhere....

    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" />
    <title>Test</title>
    
    
    <script type="text/javascript">
    	 function toggle2() {
    	     if (document.getElementById) {
    		 if (document.getElementById("2_checkbox").checked == true) {
    		     document.getElementById("2").style.display = "block";
    		 } else {
    		     document.getElementById("2").style.display = "none";
    		 }
    	     }
    	 }
    </script>
    
    <script type="text/javascript">
    	 function toggle3() {
    	     if (document.getElementById) {
    		 if (document.getElementById("3_checkbox").checked == true) {
    		     document.getElementById("3").style.display = "block";
    		 } else {
    		     document.getElementById("3").style.display = "none";
    		 }
    	     }
    	 }
    </script>
    
    <script type="text/javascript">
    	 function toggle4() {
    	     if (document.getElementById) {
    		 if (document.getElementById("4_checkbox").checked == true) {
    		     document.getElementById("4").style.display = "block";
    		 } else {
    		     document.getElementById("4").style.display = "none";
    		 }
    	     }
    	 }
    </script>
    
    
    </head>
    
    <body>
    <p  class="heading">Some wording here</p>
    <p class="CellText"><br />
     <br />
    </p>
    <form id="form1" name="form1" method="post" action="" onclick="checkBoxes()">
    <table width="569" border="1"><tr>
      <td width="559">
        
      <br>
    <p class="CellText">Check the appropriate box below to indicate whether you consent to some <br>or all of this:</p>
        <table width="530" border="1">
          <tr>
            <td width="520" valign="middle" class="CellText"><input type="checkbox" name="checkbox" id="checkbox" />&nbsp;I consent entirely (1)</td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" name="2_checkbox" value="1" onClick="toggle2();"  id="2_checkbox" />&nbsp;I consent to some, but not all of this (2)</p><div id="2" style="display:  none;">&nbsp;<input type="button" value="Add more names" onclick="addNames()">
    <table><tr><td>Which Parts</td><td>Reason Not To</td></tr>
    <tr><td><input type="text" name="2_part1"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason1"  size="55" /></td></tr>
    <tr><td><input type="text" name="2_part2"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason2"  size="55" /></td></tr>
    <tr><td><input type="text" name="2_part3"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason3"  size="55" />
    </td></tr>
    </table>
    </td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" name="3_checkbox" value="1" onClick="toggle3();"  id="2_checkbox" />&nbsp;I consent to this but have the following concerns (3) <br /></p><div id="3" style="display:  none;">
    <table><tr><td>Name</td><td>Reason Not To</td></tr>
    <tr><td><input type="text" name="3_part1"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason1"  size="55" /></td></tr>
    <tr><td><input type="text" name="3_part2"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason2"  size="55" /></td></tr>
    <tr><td><input type="text" name="3_part3"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason3"  size="55" /></td></tr></table>
    </td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" name="4_checkbox" value="1" onClick="toggle4();"  id="4_checkbox" />&nbsp;I do not consent to any of this (4)</p><div id="4" style="display:  none;">
    <table><tr><td>Explain Your Reasons for NOT Consenting</td></tr>
    <tr><td><textarea name="4_part1" cols="40" rows="5"/></textarea></tr>
    </table>
    </td>
          </tr>
        </table>
        <p>&nbsp;</p>
        <p class="CellText">I submit and sign this form on behalf of whomever.</p>
        <table>
      <tr><td class="CellText">Your Name: </td><td class="CellText"><input type="text" size=40 name="t1" id="t1" value=''/></td></tr>
      <tr><td class="CellText">Your Email: </td><td class="CellText"><input type="text" size=40 name="t5" id="t5" value=''/></td></tr><tr class="CellText"></p>
      <tr><td class="CellText">Your Phone Number: </td><td class="CellText"><input type="text" size=40 name="t6" id="t6" value=''/></td></tr>
      <tr>
        <td nowrap="nowrap" class="CellText">Organization Represented: </td>
        <td class="CellText"><input type="text" size=40 name="t6" id="t6" value=''/> <a href="#" onClick="MyWindow=window.open('help.html','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=650,height=325,left=200,top=100'); return false;">[ ? ]</a></td>
      </tr>
    <tr><td class="CellText"></td><td class="CellText"></td>
    </tr>
      </table>
      
      <input type="submit" name="submit" id="submit" value="Submit" />
    &nbsp;
    <input type="reset" name="Reset" id="button" value="Clear" /></td></tr></table>
    </form>
    <script type="text/javascript">
    
    function checkBoxes() {
     var box;
     document.getElementById('2_checkbox').style.display="none";
     document.getElementById('3_checkbox').style.display="none";
     document.getElementById('4_checkbox').style.display="none";
     el=document.forms[0].elements[0].form.elements;
        for (var i = 0; i < document.forms[0].elements.length; i++) {
    	el[i].disabled=false;
    		if ((el[i].getAttribute('type') == 'checkbox')&&(el[i].checked==true)) {
    		box=i;
    	}	
    }
    
    switch(box) {
    	case 0:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    break; 
    	case 1:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('2_checkbox').style.display="block";
    break;
    	case 2:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('3_checkbox').style.display="block";
    break
    	case 3:
    	el[0].disabled=true;
    	el[1].disabled=true;
    	el[2].disabled=true;
    	document.getElementById('4_checkbox').style.display="block";
    break;
    		}
    }
    
    
    function addNames() {
    var thediv=document.getElementById('2');
    var extras=document.createElement('div');
    extras.innerHTML='<tr><td>&nbsp;<input type="text" name="4_part4"  size="30" maxlength="30" />&nbsp;</td><td><input type="text" name="4_reason4"  size="55" /></td></tr>'
    thediv.appendChild(extras);
    }
    </script>
    <p>&nbsp;</p>
    
    </body>
    </html>

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    that looks like the code you posted originally...

    EDIT: sorry, didn't see the other bit...
    Last edited by xelawho; 09-23-2011 at 05:32 PM. Reason: stoopidity

  • #13
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It is, but with the new code that you suggested earlier. I'm trying to incorporate it all together. Take a look at it as a webpage so you can see what I've done.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    I think there's probably a prettier way to do this, but I don't know much about manipulating form elements and I really hate working with tables.

    seems to work, anyway. If you have any questions let me know...

    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" />
    <title>Test</title>
    </head>
    
    <body>
    <p  class="heading">Some wording here</p>
    <p class="CellText"><br />
     <br />
    </p>
    <form id="form1" name="form1" method="post" action="" >
    <table width="569" border="1"><tr>
      <td width="559">
        
      <br>
    <p class="CellText">Check the appropriate box below to indicate whether you consent to some <br>or all of this:</p>
        <table width="530" border="1">
          <tr>
            <td width="520" valign="middle" class="CellText"><input type="checkbox" id="checkbox" name="checkbox" onclick="checkBoxes()"/>&nbsp;I consent entirely (1)</td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" id="2_checkbox" value="1" onclick="checkBoxes()"/>&nbsp;I consent to some, but not all of this (2)</p>
    <div id="div1" class="divs">
    <table><tr><td>Which Parts</td><td>Reason Not To</td></input><input type="button" value="Add more names" onclick="addNames()"></tr>
    <tr><td><input type="text" name="2_part1"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason1"  size="55" /></td></tr>
    <tr><td><input type="text" name="2_part2"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason2"  size="55" /></td></tr>
    <tr><td><input type="text" name="2_part3"  size="30" maxlength="30" /></td><td><input type="text" name="2_reason3"  size="55" />
    </td></tr>
    </table>
    </div>
    
    </td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" id="3_checkbox" value="1" name="3_checkbox" onclick="checkBoxes()"/>&nbsp;I consent to this but have the following concerns (3) <br /></p>
    <div id="div2" class="divs">
    <table><tr><td>Name</td><td>Reason Not To</td></tr>
    <tr><td><input type="text" name="3_part1"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason1"  size="55" /></td></tr>
    <tr><td><input type="text" name="3_part2"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason2"  size="55" /></td></tr>
    <tr><td><input type="text" name="3_part3"  size="30" maxlength="30" /></td><td><input type="text" name="3_reason3"  size="55" /></td></tr>
    </table>
    </div>
    </td>
          </tr>
          <tr>
            <td valign="middle" class="CellText">
    <input type="checkbox" name="4_checkbox" value="1" id="4_checkbox" onclick="checkBoxes()"/>&nbsp;I do not consent to any of this (4)</p><div id="4" style="display:  none;">
    <div id="div3" class="divs">
    <table><tr><td>Explain Your Reasons for NOT Consenting</td></tr>
    <tr><td><textarea name="4_part1" cols="40" rows="5"/></textarea></tr>
    </table>
    </div>
    </td>
          </tr>
        </table>
        <p>&nbsp;</p>
        <p class="CellText">I submit and sign this form on behalf of whomever.</p>
        <table>
      <tr><td class="CellText">Your Name: </td><td class="CellText"><input type="text" size=40 name="t1" id="t1" value=''/></td></tr>
      <tr><td class="CellText">Your Email: </td><td class="CellText"><input type="text" size=40 name="t5" id="t5" value=''/></td></tr><tr class="CellText"></p>
      <tr><td class="CellText">Your Phone Number: </td><td class="CellText"><input type="text" size=40 name="t6" id="t6" value=''/></td></tr>
      <tr>
        <td nowrap="nowrap" class="CellText">Organization Represented: </td>
        <td class="CellText"><input type="text" size=40 name="t6" id="t6" value=''/> <a href="#" onClick="MyWindow=window.open('help.html','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=650,height=325,left=200,top=100'); return false;">[ ? ]</a></td>
      </tr>
    <tr><td class="CellText"></td><td class="CellText"></td>
    </tr>
      </table>
      
      <input type="submit" name="submit" id="submit" value="Submit" />
    &nbsp;
    <input type="reset" name="Reset" id="button" value="Clear" /></td></tr></table>
    </form>
    <style>
    .divs {
    display:none;
    }
    </style>
    <script type="text/javascript">
    var el=[];
    
     for (var i = 0; i < document.forms[0].elements.length; i++) {
        if (document.forms[0].elements[i].type == "checkbox") {
            el.push(document.forms[0].elements[i]);
        }
    }
    
    function checkBoxes() {
     var box;
    document.getElementById('div1').style.display="none";
    document.getElementById('div2').style.display="none";
    document.getElementById('div3').style.display="none";
    
        for (var a = 0; a < el.length; a++) {
    	el[a].disabled=false;
    		if (el[a].checked==true) {
    		box=a;
    	} 	
    }
    
    
    switch(box) {
    	case 0:
    	el[1].disabled=true;
    	el[2].disabled=true;
    	el[3].disabled=true;
    break; 
    	case 1:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div1').style.display="block";
    break;
    	case 2:
    	el[0].disabled=true;
    	el[3].disabled=true;
    	document.getElementById('div2').style.display="block";
    break
    	case 3:
    	el[0].disabled=true;
    	el[1].disabled=true;
    	el[2].disabled=true;
    	document.getElementById('div3').style.display="block";
    break;
    		}
    }
    
    
    function addNames() {
    var thediv=document.getElementById('div1');
    var extras=document.createElement('div');
    extras.innerHTML='<tr><td>&nbsp;<input type="text" name="4_part4"  size="30" maxlength="30" />&nbsp;</td><td><input type="text" name="4_reason4"  size="55" /></td></tr>'
    thediv.appendChild(extras);
    }
    </script>
    <p>&nbsp;</p>
    
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    GG29 (09-23-2011)

  • #15
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This looks great! I'm trying to understand where I went wrong. I think it was mostly in the way I was referencing the 'divs'? In any case, I truly appreciate all of your help!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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