Hide-Disable/Show-Enable radio based on checkbox group

Hi to all,
How to dinamically Hide-Disable/Show-Enable radio button based on the choice taken from a checkbox group?

In my form i have a checkbox group with 4 choices (with value 1,2,3,4) and two radios group(the first yes/no and the second male/female).
Eg.
If in the checkbox you choose 1 and/or 2 the two radios are Shown and Required, else if they are Hidden and Disabled -> and if you de-select the checkbox the radios return to be Hidden and Disabled

Thanks in Advance

If you look in the FAQs http://www.chronoengine.com/faqs.html item 47 there is information about how to do this using useableforms js.
http://www.quirksmode.org/dom/usableforms.html
As far as I know theres no wizards in chronoforms for this kind of thing.

If you look in the FAQs http://www.chronoengine.com/faqs.html item 47 there is information about how to do this using useableforms js.
http://www.quirksmode.org/dom/usableforms.html
As far as I know theres no wizards in chronoforms for this kind of thing.

Hi andypooz,
thanks for reply...in that page explain how to hide and show form's field...I know how to do that with javascript for eg.

      //radio1 Hidden
      radio1_div = $('radio1_container_div');
      radio1_div.setStyle('display', 'none');
      //radio1 Shown
      radio1_div.setStyle('display', 'block');
      // The same for radio2     

The problem is that both the radios are required. So though they are hidden, they are also required and the form submission fails.
What i need is that when the radios are hidden they must also be not required, else if the radios are shown they must also be required

I know how to Hide and Disable(not required) a textbox field with this javascript code

field = $('field1');
field.disabled = true;

but i don't know how to do the same things with a radio button

Thanks

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

Hi everybody !

Thanks to "fasenderos" for your help ! It works well when I try it on my website.

But I need something else, with the same function, but with only 1 checkbox. When this checkbox is checked, a text-area must be shown and required for the form validation.

I've tried many times to change the code of "fasenderos", but it doesn't work unfortunately. I looked in Google, but didn't found anything that could be helpful.

Could someone help me please ? I need your help !!! These things must be integrated in a form which already exists, created with Chronoforms.

Thank you, greetings,
Lokoop

Hi Lokoop,

Sorry it's taken a while to get back to your post.

Here's an example of a script to hide a textarea based on a checkbox setting. See a demo here

The form uses standard ChronoForms elements with IDs set - 'checkbox' for the checkbox and 'textarea' for the textarea. If you use different IDs you can change the two lines near the beginning of the script. The text area as set as 'required' on the validation tab:

var checkbox_id, div, textarea_id, checkbox, textarea;
  checkbox_id = 'checkbox';
  textarea_id = 'textarea';

window.addEvent('domready', function() {
  checkbox = $(checkbox_id);
  textarea = $(textarea_id);
  div = $(textarea_id+'_container_div');
  div.dissolve();
  showHide();
  checkbox.addEvent('click', showHide);
});

function showHide() {
  if ( checkbox.checked ) {
    div.reveal();
    textarea.disabled = false;
  } else {
    div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}

Bob

Hey,

unfortunately I have some problems setting up this piece of code.
I implemented the JS code as On Load -> Load JS event and named the checkbox 'checkbox' and the textarea 'textarea'.

Is there anything else I have to set up?

http://neu.soul-life-therapy.com/component/content/article/10-einzelseiten-system-de/37-test


Thanks

Jakob

hello Bob, im get confuse to identify what is variable and what is field id
could you post an example code in js with one checkbox to show/hide and 3 textbox fields id's like: text_name, text_email, text_address?
thanks

Clovis

hello Bob, im get confuse to identify what is variable and what is field id
could you post an example code in js with one checkbox to show/hide and 3 textbox fields id's like: text_name, text_email, text_address?
thanks

Clovis

this code what is wrong?

var chk_cnpj_id, txt_razao_social_id, txt_cnpj_id, txt_inscestadual_id, txt_inscmunicipal_id, chk_cnpj, txt_razao_social, txt_cnpj, txt_inscestadual, txt_inscmunicipal, div, div2, div3, div4;
/* edit the next two lines to match the ids of the elements in your form */
chk_cnpj_id = 'chk_cnpj';
txt_razao_social_id = 'txt_razao_social';
txt_cnpj_id = 'txt_cnpj';
txt_inscestadual_id = 'txt_inscestadual';
txt_inscmunicipal_id = 'txt_inscmunicipal';

window.addEvent('domready', function() {
  chk_cnpj = $(chk_cnpj_id);
  txt_razao_social = $(txt_razao_social_id);
  txt_cnpj = $(txt_cnpj_id);
  txt_inscestadual = $(txt_inscestadual_id);
  txt_inscmunicipal = $(txt_inscmunicipal_id);
  
  div = $(txt_razao_social_id+'_container_div');
  div.dissolve();
 
  div2 = $(txt_cnpj_id+'_container_div');
  div2.dissolve();
 
  div3 = $(txt_inscestadual_id+'_container_div');
  div3.dissolve();
 
  div4 = $(txt_inscmunicipal_id+'_container_div');
  div4.dissolve();  
 
  showHide();
  checkbox.addEvent('click', showHide);
});

function showHide() {
  if (chk_cnpj.checked) {
    div.reveal();
    txt_razao_social.disabled = false;
	
	div2.reveal();
	txt_cnpj.disabled = false;
	
	div3.reveal();
	txt_inscestadual.disabled = false;
	
	div4.reveal();
	txt_inscmunicipal.disabled = false;
	
  } else {
    div.dissolve();
    txt_razao_social.value = '';
    txt_razao_social.disabled = true;
	
	div2.dissolve();
	txt_cnpj.value = '';
	txt_cnpj.disabled = true;
	
	div3.dissolve();
	txt_inscestadual.value = '';
	txt_inscestadual.disabled = true;
	
	div4.dissolve();
	txt_inscmunicipal.value = '';
	txt_inscmunicipal.disabled = true;
  }
}

Hi clovismmbr,

Well done :-)

Bob