I have solved...😀 😀
i don't know if this is the right way, probably i have used so much redundant code, but now the form work like a charm... 8)
Here is the code, I hope it can help someone in the future.🙂
FormHTML:
<div class="ccms_form_element cfdiv_checkboxgroup" id="question_container_div"><label for="question">Question</label><input type="hidden" name="question" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="checkbox" name="question[]" id="question_0" title="" value="1" class="validate['group[0]']" />
<label for="question_0">First</label>
<input type="checkbox" name="question[]" id="question_1" title="" value="2" class="validate['group[0]']" />
<label for="question_1">Second</label>
<input type="checkbox" name="question[]" id="question_2" title="" value="3" class="validate['group[0]']" />
<label for="question_2">Third</label>
<input type="checkbox" name="question[]" id="question_3" title="" value="4" class="validate['group[0]']" />
<label for="question_3">Fourth</label>
</div><div class="clear"></div><div id="error-message-question"></div></div><div class="ccms_form_element cfdiv_radio" id="radio1_container_div"><label for="radio1">Radio 1</label><input type="hidden" name="radio1" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="radio1" id="radio1_0" title="" value="male" class="validate['required']" />
<label for="radio1_0">male</label>
<input type="radio" name="radio1" id="radio1_1" title="" value="female" class="validate['required']" />
<label for="radio1_1">female</label>
</div><div class="clear"></div><div id="error-message-radio1"></div></div><div class="ccms_form_element cfdiv_radio" id="radio2_container_div"><label for="radio2">Radio 2</label><input type="hidden" name="radio2" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="radio2" id="radio2_0" title="" value="No" class="validate['required']" />
<label for="radio2_0">No</label>
<input type="radio" name="radio2" id="radio2_1" title="" value="yes" class="validate['required']" />
<label for="radio2_1">Yes</label>
</div><div class="clear"></div><div id="error-message-radio2"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-0c4a47c3d1e08b625d08388bd7514340_container_div"><input name="input_submit_3" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_3"></div></div>
Javascript code:
window.addEvent('domready', function() {
var question, radio1_div, radio2_div, male, female, radio2_no, radio2_yes;
question = $$('#question_container_div input');
// Hide the First Radio
radio1_div = $('radio1_container_div');
radio1_div.setStyle('display', 'none');
//Hide the Second Radio
radio2_div = $('radio2_container_div');
radio2_div.setStyle('display', 'none');
//Disable the First choiche of the First Radio
male = $('radio1_0');
male.disabled = true;
//Disable the Second choiche of the First Radio
female = $('radio1_1');
female.disabled = true;
//Disable the First choiche of the Second Radio
radio2_no = $('radio2_0');
radio2_no.disabled = true;
//Disable the Second choiche of the Second Radio
radio2_yes = $('radio2_1');
radio2_yes.disabled = true;
var check1 = false;
var check2 = false;
var check3 = false;
var check4 = false;
question.each(function(item) {
item.addEvent('click', function(){
if ( this.value == '1') {
if(check1==false) check1=true;
else check1=false;
}else if ( this.value == '2') {
if(check2==false) check2=true;
else check2=false;
}else if ( this.value == '3') {
if(check3==false) check3=true;
else check3=false;
}else if ( this.value == '4') {
if(check4==false) check4=true;
else check4=false;
}
if(check1==true || check2==true || check3==true){
//Show and Enable the two radio that now are required if the first three choices of the checkbox group are clicked
radio1_div.setStyle('display', 'block');
radio2_div.setStyle('display', 'block');
male.disabled = false;
female.disabled = false;
radio2_no.disabled = false;
radio2_yes.disabled = false;
}
else if(check1==false && check2==false && check3==false){
//Hide and disable (so now are not required) the two radio if the first three choices of the checkbox group are unclicked
radio1_div.setStyle('display', 'none');
radio2_div.setStyle('display', 'none');
male.disabled = true;
female.disabled = true;
radio2_no.disabled = true;
radio2_yes.disabled = true;
}
if(check4==true){
//Here you can add more code if you want that something happens if the 4th choices of the checkbox group is clicked..in my case I only want that the two radios stay hidden and not required, so no need code here for me🙂
}
else if(check4==false){
//Same thing when the 4th choices is unclicked
}
});
});
});
Cheers😉
Andrea