...

View Full Version : Form Dependancy Script



KyleT4L
08-13-2008, 07:35 AM
Hello, all!

Okay, this problem could either be javascript related or HTML related. Maybe a bit of both.

I picked up a form dependancy script from somewhere, and it works great. Only problem is, I can't seem to get the SELECTED option working for dropdown menus, which is kind of annoying.

I'd contact the creator, but the help thread has been dead for months.

I tried every HTML option I could find with no results, which led me to believe the problem is in the script somewhere.

Or I could just have missed something.

So, first, here is the javascript (sorry for length). If no one can find a cause there I'll move on to questioning folks in the HTML forum.


/*
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 = "";
};
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;
};
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();
}
}


Thanks!

rangana
08-13-2008, 07:54 AM
Could you please up the involved markup (HTML).

Also, could you please rephrase this part:


I can't seem to get the SELECTED option working for dropdown menus


What's the problem and how do you expect it to work?

KyleT4L
08-13-2008, 08:06 AM
HTML can be found here: www.training4life.org/file.htm

What I mean to say is, in a form, you have something like:
select
option
option
option
/select

I am trying to choose which option displays automatically in the dropdown. Now, with this javascript in play, currently NO OPTION is displayed as standard in the dropdown, as you will well see.

I hope that is more clear.

KyleT4L
08-14-2008, 03:39 AM
Anyone have any thoughts on this, mayhaps?

rangana
08-14-2008, 06:36 AM
I'm sorry for not coming in the thread last day, I was so busy. Anyway, which drop-down/s do you want to see by default?

So, your goal is to have a default "dropdown" be seen during load. Was it?

KyleT4L
08-14-2008, 09:30 PM
Not a problem, dude.

Anyway, sorta.

For example, if you click BLS at the top, new dropdown menus appear.

But they're blank.

You have to physically click them and select an item. I would rather that a 'standard' item be automatically selected when they appear.

Like a regular dropdown menu WITHOUT the javascript, you can use the SELECTED option to show which item will show up first on the dropdown (without clicking it), or otherwise the first item will appear first.

For some reason with this script that is no longer true.

Clearer?

rangana
08-15-2008, 03:19 AM
It was'nt clear, not when I viewed your page on IE which exhibits the problem you were describing. I have a hard time figuring what your problem was since FF does'nt show what IE is showing (oddly).

For a fix, replace the script to this:


/*
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 = "";
};
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;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
if(e[i].type.toLowerCase()=='select-one')
e[i].options.selectedIndex=0;
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();
}
}


Hope that helps.

KyleT4L
08-15-2008, 06:24 AM
No dice. Although the first selection in each dropdown was shown, it also negated the function of the dependancy script. Every drop down was shown on the page, rather than some being hidden until another selection was made.

rangana
08-15-2008, 06:57 AM
I have to admit that I'm confused and it beats me.
You might find luck on posting on DD. Twey, the owner of the script goes often on DD forum (http://dynamicdrive.com/forums/member.php?u=3374).

KyleT4L
08-15-2008, 08:12 AM
Thank you for trying. I will give that a shot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum