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:
The above seems to work just fine.
Also in the javascript onLoad and onChange for Q1 I run the following:
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.
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:
Code:
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);
}
}
}
Also in the javascript onLoad and onChange for Q1 I run the following:
Code:
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;
}
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.