Form Dependency Manager & Checkbox set

**dsontag** · 09-30-2010, 04:05 PM

1) CODE TITLE: Form Dependency Manager

2) AUTHOR NAME/NOTES: Twey

3) DESCRIPTION: Show/Hide form elements depending on other selections.

4) URL TO CODE: http://www.dynamicdrive.com/dynamici...dependency.htm

or, ATTACHED BELOW (see #3 in guidelines below):

PROBLEM:
I've forms on my site which have checkbox sets which are named "checkboxname[]" so the values are passed to PHP in an array. When using the form dependency manager, the only way that sub-fields are displayed is if ALL the checkboxes are selected or if only the ones that have sub-selections to show are checked.

Here are the first set of checkboxes:

Code:

<label for="comptype1"><input id="comptype1" type="checkbox" name="comptype[]" value="COMP" class="DEPENDS ON type BEING COMP">Completes Data <sup style="color:#C02020;">1</sup><br></label>
<label for="comptype2"><input id="comptype2" type="checkbox" name="comptype[]" value="INS" class="DEPENDS ON type BEING COMP">INS Clears<br></label>
<label for="comptype3"><input id="comptype3" type="checkbox" name="comptype[]" value="OOS" class="DEPENDS ON type BEING COMP">OOS Clears<br></label>
<label for="comptype5"><input id="comptype5" type="checkbox" name="comptype[]" value="DET" class="DEPENDS ON type BEING COMP">Detailed Orders<br></label>

This is a set where the user can select one or any combination of items. The sub-set of checkboxes is below:

Code:

<label for="techtype1"><input id="techtype1" type="checkbox" name="techtype[]" value="ONE" class="DEPENDS ON comptype[] BEING DET OR comptype[] BEING COMP">ONE<br></label>
<label for="techtype2"><input id="techtype2" type="checkbox" name="techtype[]" value="TWO" class="DEPENDS ON comptype[] BEING DET OR comptype[] BEING COMP">TWO<br></label>

These two items above should appear ANY time that either Completes Data AND/OR Detailed Orders is checked. However it does not work that way.

If ALL are checked, the second set of checkboxes appears.
If I uncheck either completes OR detailed orders, the second set of checkboxes disappears - even though one of the items that requires that set is still checked.

Is there a way to modify the show/hide so that if a selected value is checked inside an array of checkboxes, the sub-set will display/not display as desired?

Also, is there a way to tell another sub-set of checkboxes to appear only if one of the previous ones has been checked? Kind of like saying CONFLICTS with fieldname BEING EMPTY except for checkboxes?

Any help is apprecieated.
Thanks!

**dsontag** · 10-06-2010, 09:30 PM

Anybody?
Is Twey still around?

**dsontag** · 10-18-2010, 01:25 PM

In looking further into this, it seems the script needs an array to traverse through to confirm one of the options is checked or not. However, I suck at JS arrays and have no idea how to incorporate that into the existing form dependency script. I'll keep plugging away at this, but if someone knows how to get this thing to look/monitor an array of checkboxes, I'd be most grateful!

**dsontag** · 11-01-2010, 09:44 PM

Anyone?

**Nile** · 11-02-2010, 12:35 AM

Sorry for the delay!

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include ALL your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

**dsontag** · 11-02-2010, 02:46 PM

I cannot provide a link to the page on my site (company intranet), so I made a stand-alone php page using the script and the form that I've been testing with. If there is anything else needed or questions, please let me know. Thank you!!!

Due to length restrictions in the posting, I've pasted the code for the page in two parts ... part two coming in next post.....

PART 1:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TEST FORM FOR DEPENDENCY</title>

<script type="text/javascript" language="JavaScript">

/*
	Form Manager: A simple method of constructing complex dynamic forms.
	Written by Twey, http://www.twey.co.uk/.
	Use, copying, and modification allowed, so long as credit
	remains intact, under the terms of the GNU General Public License,
	version 2 or later. See http://www.gnu.org/copyleft/gpl.html for details.
*/

var FORM_MANAGER_CONDITION_SEPARATOR = " AND ";
var FORM_MANAGER_POSSIBILITY_SEPARATOR = " OR ";
var FORM_MANAGER_NAME_VALUE_SEPARATOR = " BEING ";
var FORM_MANAGER_DEPENDS = "DEPENDS ON ";
var FORM_MANAGER_CONFLICTS = "CONFLICTS WITH ";
var FORM_MANAGER_EMPTY = "EMPTY";

function addEvent(el, ev, f) {
  if(el.addEventListener)
    el.addEventListener(ev, f, false);
  else if(el.attachEvent) {
    var t = function() {
      f.apply(el);
    }
    addEvent.events.push({'element': el, 'event': ev, 'handler': f});
    el.attachEvent("on" + ev, t);
  } else
    el['on' + ev] = f;
}

function addEvents(els, evs, f) {
  for(var i = 0; i < els.length; ++i)
    for(var j = 0; j < evs.length; ++j)
      addEvent(els[i], evs[j], f);
}

addEvent.events = [];

if(typeof window.event !== "undefined")
  addEvent(window, "unload", function() {
      for(var i = 0, e = addEvent.events; i < e.length; ++i)
        e[i].element.detachEvent("on" + e[i].event, e[i].handler);
    }
  );

function getRadioValue(el) {
  if(!el.length) return null;
  for(var i = 0; i < el.length; ++i) {
    if(el[i].checked) { return el[i].value; }
	}
  return null;
}

function getSelectValue(el) {
  if(!el.tagName  || el.tagName.toLowerCase() !== "select")
    return null;
  return el.options[el.selectedIndex].value;
}

function isElementValue(el, v) {
  if(v === FORM_MANAGER_EMPTY) v = '';
  return (
    getRadioValue(el) == v ||
    getSelectValue(el) == v ||
    (
      el.tagName &&
      el.tagName.toLowerCase() !== "select" &&
      el.value == v
    )
  );
}

function setupDependencies() {
  var showEl = function() {
    this.style.display = "";
    if(this.parentNode.tagName.toLowerCase() == "label")
      this.parentNode.style.display = "";
	if(this.parentNode.tagName.toLowerCase() == "div")
      this.parentNode.style.display = "";
  }
  var hideEl = function() {
    this.style.display = "none";
    if(typeof this.checked !== "undefined") this.checked = false;
    else this.value = "";
    if(this.parentNode.tagName.toLowerCase() == "label")
      this.parentNode.style.display = "none";
    this.hidden = true;
	if(this.parentNode.tagName.toLowerCase() == "div")
      this.parentNode.style.display = "none";
      this.hidden = true;
  }
  var calcDeps = function() {
    for(var i = 0, e = this.elements; i < e.length; ++i) {
      e[i].hidden = false;
      for(var j = 0, f = e[i].className.split(FORM_MANAGER_CONDITION_SEPARATOR); j < f.length; ++j)
        if(f[j].indexOf(FORM_MANAGER_DEPENDS) === 0) {
          for(var k = 0, g = f[j].substr(FORM_MANAGER_DEPENDS.length).split(FORM_MANAGER_POSSIBILITY_SEPARATOR); k < g.length; ++k)
            if(g[k].indexOf(FORM_MANAGER_NAME_VALUE_SEPARATOR) === -1) {
	      if(e[g[k]] && e[g[k]].checked) break;
            else if(k + 1 == g.length)
                e[i].hide();
            } else {
              var n = g[k].split(FORM_MANAGER_NAME_VALUE_SEPARATOR),
                v = n[1];
              n = n[0];
	      if(e[n])
	        if(isElementValue(e[n], v)) break;
	        else if(k + 1 == g.length) e[i].hide();
	    }
        } else if(f[j].indexOf(FORM_MANAGER_CONFLICTS) === 0) {
          if(f[j].indexOf(FORM_MANAGER_NAME_VALUE_SEPARATOR) === -1) {
	    if(e[f[j].substr(FORM_MANAGER_CONFLICTS.length)] && e[f[j].substr(FORM_MANAGER_CONFLICTS.length)].checked) {
              e[i].hide();
              break;
            }
          } else {
            var n = f[j].substr(FORM_MANAGER_CONFLICTS.length).split(FORM_MANAGER_NAME_VALUE_SEPARATOR),
              v = n[1];
            n = n[0];
            if(e[n]) {
              if(isElementValue(e[n], v)) {
                e[i].hide();
                break;
              }
            }
          }
        }
      if(!e[i].hidden) e[i].show();
    }
  }
  var changeHandler = function() {
    this.form.calculateDependencies();
    return true;
  }
  for(var i = 0; i < arguments.length; ++i) {
	for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
      addEvents([e[j]], ["change", "keyup", "focus", "click", "keydown"], changeHandler);
      e[j].hide = hideEl;
      e[j].show = showEl;
    }

    (e = window.document.forms[arguments[i]]).calculateDependencies = calcDeps;
    e.calculateDependencies();
  }
}

<!-- 	
<?
// change the number here to the number of checkbox sections you want to include this in.
for ($ch = 0; $ch <= 3; $ch++) {
?>
var checkflag<?= $ch; ?> = "false";
function check<?= $ch; ?>(field) {
  if (checkflag<?= $ch; ?> == "false") {
    for (i = 0; i < field.length; i++) {
      field[i].checked = true;
    }
    checkflag<?= $ch; ?> = "true";
    return "Clear";
  } else {
    for (i = 0; i < field.length; i++) {
      field[i].checked = false;
    }
    checkflag<?= $ch; ?> = "false";
    return "ALL";
  }
}
<?
}
?>
</script>
<style type="text/css">
fieldset { border:0; } 
</style>
</head>

**dsontag** · 11-02-2010, 02:47 PM

PART 2:

Code:

<body>

<h2>TEST FORM FOR DEPENDENCY</h2>

<script type="text/javascript" language="javascript">
window.onload = function() {
    setupDependencies('dailytv'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>

<?

echo '<form name="dailytv" method="POST" action="'.$_SERVER["PHP_SELF"].'">';
			
echo '<table border="0" cellpadding="5" cellspacing="0" class="onlyscreen">';

echo '<tr valign="top"><td nowrap>';
echo '<input type="text" name="nothing" value="Select Service:" readonly="readonly" style="border:0px;font-weight:bold;"><br>
<label for="svctype1"><input id="svctype1" type="radio" name="svctype" value="CTV">CTV<br></label>
<label for="svctype2"><input id="svctype2" type="radio" name="svctype" value="UTV">UTV<br></label>
<label for="svctype3"><input id="svctype3" type="radio" name="svctype" value="COMP">COMP</label></td><td>&nbsp;</td>';

echo '<td nowrap>';
echo '<input type="text" name="location" value="Select Location(s)" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV" readonly="readonly" style="border:0px;font-weight:bold;"><br>';
echo '<label for="loc1"><input id="loc1" type="checkbox" name="loc[]" value="LOC1" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">LOC1<br></label>
<label for="loc2"><input id="loc2" type="checkbox" name="loc[]" value="LOC2" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">LOC2<br></label>
<label for="loc3"><input id="loc3" type="checkbox" name="loc[]" value="LOC3" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">LOC3<br></label>
<label for="loc4"><input id="loc4" type="checkbox" name="loc[]" value="LOC4" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">LOC4<br></label>
<fieldset name="locationAll" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">
<input type="button" name="locALL" value="ALL" onClick="this.value=check0(document.forms[\'dailytv\'].elements[\'loc[]\']);">';
//<input type="hidden" name="locsel" value="">
echo '</fieldset>';
echo '</td><td>&nbsp;</td>';

echo '<td nowrap>';
echo '<input type="text" name="reporttype" value="Select Report Type" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV" readonly="readonly" style="border:0px;font-weight:bold;"><br>
<label for="type1"><input id="type1" type="radio" name="type" value="IND" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">IND<br></label>
<label for="type2"><input id="type2" type="radio" name="type" value="COMP" class="DEPENDS ON svctype BEING CTV OR svctype BEING UTV">COMP</label>
</td><td>&nbsp;</td>';

echo '<td nowrap>';
echo '<input type="text" name="reportsel" value="Select Report(s):" class="DEPENDS ON type BEING IND OR type BEING COMP" readonly="readonly" style="border:0px;font-weight:bold;"><br>
<label for="ind1"><input id="ind1" type="checkbox" name="indtype[]" value="RAP" class="DEPENDS ON type BEING IND">Repair Appts Met<br></label>
<label for="ind2"><input id="ind2" type="checkbox" name="indtype[]" value="INS" class="DEPENDS ON type BEING IND">IN-Service (INS)<br></label>
<label for="ind3"><input id="ind3" type="checkbox" name="indtype[]" value="OOS" class="DEPENDS ON type BEING IND">Out of Service (OOS) <sup style="color:#C02020;">2</sup><br></label>
<fieldset name="reportselAll" class="DEPENDS ON type BEING IND">
<input type="button" name="indtypeALL" value="ALL" onClick="this.value=check1(document.forms[\'dailytv\'].elements[\'indtype[]\'])">
</fieldset>';

echo '
<label for="comptype2"><input id="comptype2" type="checkbox" name="comptype[]" value="INS" class="DEPENDS ON type BEING COMP">INS Clears<br></label>
<label for="comptype3"><input id="comptype3" type="checkbox" name="comptype[]" value="OOS" class="DEPENDS ON type BEING COMP">OOS Clears<br></label>
<label for="comptype5"><input id="comptype5" type="checkbox" name="comptype[]" value="DET" class="DEPENDS ON type BEING COMP">Detailed Orders<br></label>
<fieldset name="reporttype2" class="DEPENDS ON type BEING COMP">
<input type="button" name="comptypeALL" value="ALL" onClick="this.value=check1(document.forms[\'dailytv\'].elements[\'comptype[]\'])">
</fieldset></td><td>&nbsp;</td>';

echo '<td nowrap>';
echo '<input type="text" name="techselect" value="Select Tech Type(s):" class="DEPENDS ON comptypeALL BEING Clear OR comptype[] BEING DET OR svctype BEING COMP" readonly="readonly" style="border:0px;font-weight:bold;"><br>
<label for="techtype1"><input id="techtype1" type="checkbox" name="techtype[]" value="TECH1" class="DEPENDS ON comptypeALL BEING Clear OR comptype[] BEING DET OR svctype BEING COMP">TECH1<br></label>
<label for="techtype2"><input id="techtype2" type="checkbox" name="techtype[]" value="TECH2" class="DEPENDS ON comptypeALL BEING Clear OR comptype[] BEING DET OR svctype BEING COMP">TECH2<br></label>
<fieldset name="techselectAll" class="DEPENDS ON comptypeALL BEING Clear OR comptype[] BEING DET OR svctype BEING COMP">
<input type="button" name="ALL" value="ALL" onClick="this.value=check2(document.forms[\'dailytv\'].elements[\'techtype[]\'])">
</fieldset></td></tr>';
echo '</table>';

echo '<p style="margin-top:8px;">';
echo '<input type="submit" name="run" value="Run Report"> <input type="reset" name="reset" value="Clear Options">';

echo '</form>';
echo '<P>';
?>
</body>
</html>

**Nile** · 11-03-2010, 12:01 AM

Does your problem happen to every set of checkboxes or just the ones you gave as an example?

**dsontag** · 11-03-2010, 03:04 PM

On every form that I use the script on - the behaviour is the same on all of them. I manage 3 internal websites on 2 different servers and it is the same on all of them. The only thing I recall modifying from the original version available on Dynamic Drive was the addition of using div tags in addition to label tags, however, removing that part did not change the behaviour of the checkboxes.

Twey did reply a loooooooooooooooong time ago that the checkbox array and display if a checkbox array was empty was possible, however, the person in that thread never provided any code and the issue was abandoned as no one else asked about it - until me

...

**Nile** · 11-04-2010, 02:23 AM

Sorry to just give up on this - but as you probably found out: I'm not as gifted in the art of javascript like Twey is.

Try contacting him by his emails provided in his contact information on his profile page: http://www.dynamicdrive.com/forums/member.php?u=3374

Good luck! SORRY :/

Thread: Form Dependency Manager & Checkbox set

Thread Tools

Search Thread

Form Dependency Manager & Checkbox set

Need JS Array in script?

Bookmarks

Bookmarks

Posting Permissions