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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Form Dependancy Script

    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!

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anyone have any thoughts on this, mayhaps?

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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:
    Code:
    /*
    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.
    Last edited by rangana; 08-15-2008 at 06:27 AM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #8
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #10
    New Coder
    Join Date
    Feb 2008
    Posts
    33
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for trying. I will give that a shot.


  •  

    Posting Permissions

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