Enable Container based on multiple events

Hi

I have an problem with my form regarding event for multiple conditions. I want to do like below using radio box question.

Target: To open/enable/visible additional container when all the question (radio box) have value = Yes
and in my container have a few fields.

I have 4 YES/NO question using radio box, but i want this additional container will enable if ALL the question selected into YES.
But if ONE of these question selected to NO, additional container remain hide during form load.

How can achieve this method.?

Hi chekwan,

You can do this using Custom JavaScript or PHP to check the radio button settings and show/hide the container.

I'm not clear if you need to do this in the browser or if the container is on a second page of a multi-page form?

Bob

Hi GreyHead

All field is in one page, but I divided the field sections by using container (container A & container B)
If all the question in container A stated all the value in YES, the question in container B will appear.

But if one of the question in container A have NO value, the container B still remain hide.

They need to fill all the question, before submit.

Hi GreyHead,


Appreciate if you can give me the php code of the conditions since I'm no familiar with the PHP langguage and where to put the code.

Hi chekwan,

Is the form on-line? - if so please post a link; if not, what are the names and IDs of the radio buttons and the container you need to show/hide?

Bob

Hi GreyHead

here the link:
http://www.chekwan.com/projects/borneo/

I want the container name Appointment Details will enable when user select ALL the radio box button into YES..
before they can submit the form. But in default (load form) the container in hidden mode

Any update?

Hi..

Any answer for my problem.?

Hi chekwan,

Posting multiple times just wastes your time and mine and is not likely to get you a faster response.

Here is an example of code that will do what you want.

jQuery(document).ready(function(jQ){
  jQ('#chronoform-container-4').hide();
  checkRadios();
  jQ('.gbs3 :radio').change(checkRadios);

  function checkRadios() {
    var radio1, radio2, radio3;
    radio1 = jQ('input[name=radio1]:checked').val();
    radio2 = jQ('input[name=radio2]:checked').val();
    radio3 = jQ('input[name=radio3]:checked').val();
    if ( radio1 == 'Yes' && radio2 == 'Yes' && radio2 == 'Yes' ) {
      jQ('#chronoform-container-4').show();
    } else {
      jQ('#chronoform-container-4').hide();
    }
  }
});

In this case the code requires that there are three radio button groups with the names radio1, radio2, radio3 - replace these with the names of your button groups; and the container to be shown/hidden is #chronoform-container-4 - again replace this with the name of your container.

This will work on your form as the only radio button groups are those you are checking. If there were others then you would need to change the jQ('.gbs3 :radio'). The logic will need to be modified to handle the fourth group on your form which is not always shown.

Bob

[[>> later : updated to correct errors - see Max's post later <<]]

Hi GreyHead

Thanks for the reply... and sorry for the multiple posting

from the code given. I have paste the code in Setup tab and drag Load Javascript into On Load action, I change the name of the elements.. save and view form..

but nothing happened.

Please guide me where actually I need to paste these script or any missing steps.?

thanks

Hi GreyHead

I've try to put this simple code:

jQuery(document).ready(function(jQ){
  jQ('#chronoform-container-1').hide();});

and it's working. but when it come to line

checkRadios;
  jQ('.gbs3 :radio').change(checkRadios);

seems the code not excute the function..

Hi chekwan,

I don't see the JavaScript on the page at all. Do you have the Load JS action *before* the HTML (Render form) action? If not please drag it up.

Bob

Hi GreyHead,

I have paste the code into live link.. but still not working... I give you the login access into the admin and you can check if I did wrong or have error:

This is private content

Hi,

There was a small issue in the code, please try this version:

jQuery(document).ready(function(jQ){
  jQ('#chronoform-container-4').hide();
  checkRadios();
  jQ('.gbs3 :radio').change(checkRadios);

  function checkRadios() {
    var radio1, radio2, radio3;
    radio1 = jQ('input[name=radio1]:checked').val();
    radio2 = jQ('input[name=radio2]:checked').val();
    radio3 = jQ('input[name=radio3]:checked').val();
    if ( radio1 == 'Yes' && radio2 == 'Yes' && radio2 == 'Yes' ) {
      jQ('#chronoform-container-4').show();
    } else {
      jQ('#chronoform-container-4').hide();
    }
  }
});

Hi GreyHead & Max

Yes.. thats what I want! works perfectly..

thanks for both of you..

seems I owed both of you a cups of coffee!

thanks again.. cheers!