Strange Javascript Behavior

[achartier]

I have a number of checkbox elements. They are conceptually in a hierarchy. For example, the first one is a question, if the user checks the No checkbox nothing happens, if they check the Yes checkbox a number of sub questions are shown. Below is a basic example:

Q1. Do you have children? 2 checkboxes - yes/no (when the yes checkbox is selected Q1a and Q1b are shown, if the no checkbox is selected these 2 are hidden.
Q1a. Are they older than 12? 2 checkboxes - yes/no
Q1b. Are they both boys? 2 checkboxes - yes/no

I have javascript on the Yes/No checkboxes which allow only one checkbox to be selected. I call this code in the javascript onload:

addCheckboxOnClick(this.options.element);
function addCheckboxOnClick(id) {
        /* Code to allow only one checkbox to be checked */
        /* get the high level container */
        var el = document.getElementById(id);
        /* get the inputs, there will be only 2 */
        var cb = el.getElementsByTagName('input');

        /* set the onclick functions */
        for (var i=0; i<cb.length; i++) {
                cb[i].onclick = function() {
                        /* get the checkboxes  */
                        var cbs = jQuery(this).parents('.fabrikSubElementContainer').find('input');
                        /* Check or uncheck the other checkbox */
                        cbs[(this.value == 0 ? 1 : 0)].checked = (this.checked == true ? false : true);
                }
        }
}

The above seems to work just fine.
Also in the javascript onLoad and onChange for Q1 I run the following:

hideShowElements(this.get('value'), ['Q1a', 'Q1b']);
function hideShowElements(show, elems) {
        var form = getForm();
        // hide a number of elements
        for (var i=0; i< elems.length; i++) {
                if (show == true)
                        form.formElements.get(elems[i]).show();
                else
                        form.formElements.get(elems[i]).hide();
        }
}
function getForm() {
    var form = Fabrik.getBlock("form_12");
    if (form === false) {
        form = Fabrik.getBlock("details_12");
    }
    return form;
}

Note, I have shortened the element names for clarity. The above showHide stuff is not included in any onLoad or onChange for Q1a or Q1b.
The show/hide works fine when I click on the Yes/No of Q1. The problem I seem to be having is that the hide/show is firing when the user clicks on No for either of the Q1a or Q1b checkboxes. I have verified that when I click on the No checkbox for Q1a the inputs found by the jQuery are the 2 checkboxes for Q1a so setting the checked status of these inputs should not affect the status of Q1.

I am at a loss. Any help appreciated. If you wish to see it use the Test Gravit8 in mysites and once logged in go to Manage->Maintenance->Test Par-Q. You want the second page of the multipage form.

 

[achartier]

Please move to Professional section. Thanks.

 

[achartier]

Problem resolved. I took Hugh's suggestion from another thread and rewrote a few things. I now call the hideSsowElements function simply passing the element. Given that I named the sub question elements with a suffix of _a, _b etc I am able to get them by wildcard. The following code is working correctly:

function hideShowElements(el) {
    var form = el.form;
    var show = el.get('value');
    elems = jQuery("[id^=" + el.options.element + "_]");
    // hide a number of elements
    for (var i=0; i< elems.length; i++) {
        if (show == true)
            form.formElements.get(elems[i].id).show();
        else
            form.formElements.get(elems[i].id).hide();
    }
}

 

[cheesegrits]

BTW, I presume your functions are in a form_X.js file, and you just call them from the element FX JS box?

Wasn't really clear from the first post, it looked like you had all that code in the element FX JS box. Which would be a Bad Thing, as it'd break if you did that action twice (trying to redeclare a function).

-- hugh

 

[achartier]

You are correct, it was in a form_x.js file called from the element FX JS box.