...

View Full Version : Expandable Checkboxes Restricted Based On Choice



GG29
09-23-2011, 02:08 PM
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!

xelawho
09-23-2011, 03:59 PM
I don't really understand the caveat - a text area grows as space is required. But maybe this is a start...



<!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>

GG29
09-23-2011, 04:41 PM
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.

xelawho
09-23-2011, 04:42 PM
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:



<!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>

xelawho
09-23-2011, 04:49 PM
I get it now. Kind of like this?



<!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>

GG29
09-23-2011, 04:51 PM
This was the code that I found and tried to incorporate into my page, but any changes that I made to it, broke it.


<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>

GG29
09-23-2011, 04:52 PM
YES! That would be perfect! Can you help me incorporate that into what I already had?

xelawho
09-23-2011, 05:00 PM
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?

GG29
09-23-2011, 05:19 PM
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.

xelawho
09-23-2011, 05:46 PM
I'm giving it a shot.
that's how I "learnt" :thumbsup:

GG29
09-23-2011, 06:26 PM
So close, yet so far. I'm trying but the behavior is not as expected so I'm evidently making errors somewhere....


<!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>

xelawho
09-23-2011, 06:31 PM
that looks like the code you posted originally... :confused:

EDIT: sorry, didn't see the other bit...

GG29
09-23-2011, 06:34 PM
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.

xelawho
09-23-2011, 07:27 PM
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...



<!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>

GG29
09-23-2011, 08:29 PM
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!

xelawho
09-23-2011, 08:37 PM
yes, the div refs were out and you also have to close a div tag like this </div> leaving them opens mucks up the code same as any html element

I had to add an extra loop to deal with the checkboxes because in the real example there were lots of other form elements and that was messing up the switch.

I think that was about it. If you check back here in half an hour somebody much smarter than me will have rewritten the entire thing to work much better. that's the way it goes... :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum