PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Creating Dynamic Radio Options Based on Checkboxes Selections Using Javascript

  1. I didn't find the PHP solutions sufficient for my needs. I crafted an example of how to go about creating dynamic radio button options using javascript by binding to the gform_page_loaded hook and gathering the values of checkboxes from a previous step.

    There is something to note about this hook, I'm not sure if it's considered a bug or not. The hook will still fire if you click "next" or "previous" even if validation fails and keeps you on that page. In my case, where I'm using javascript to hide radio buttons, this doesn't really matter but I thought the gforms devs might want to know, if they weren't aware.

    For this example, I'm using a form with the id of 6. I'm using checkboxes on page 1 (input_6_2) to reformat a multiple choice list on page 2 by hiding all the radio buttons, then showing only specific ones based on the values of the checkboxes.

    <script type="text/javascript">
    jQuery(document).bind("gform_page_loaded", function(event, formId, currentPageNumber) {
        var ainputs=[];
        jQuery("#input_6_2 li input:checkbox").each(function() { ainputs.push(jQuery(this).is(":checked")) });
        if (currentPageNumber==2) {
            //alert('New page loaded. Page: ' + currentPageNumber + ', Form: ' + formId + ', inputs: ' + ainputs.join('", "'));
            jQuery("#input_6_8 li").hide();
            if (ainputs[0]==true) {
                    jQuery(".gchoice_8_0").show();
            }
            if (ainputs[1]==true) {
                    jQuery(".gchoice_8_1").show();
                    jQuery(".gchoice_8_2").show();
            }
            if (ainputs[2]==true) {
                    jQuery(".gchoice_8_3").show();
                    jQuery(".gchoice_8_4").show();
            }
            if (ainputs[3]==true) {
                    jQuery(".gchoice_8_2").show();
                    jQuery(".gchoice_8_4").show();
                    jQuery(".gchoice_8_5").show();
            }
        }
    });
    </script>

    This is just a bare proof of concept, you'll want to do some additional checks to ensure your users aren't passing impossible values (values from now hidden multiple choice selections). I found this solution to be more flexible than the PHP "solution" for a project I'm currently working on.

    I hope these notes help others looking to implement something similar. Maybe the devs have a few comments about it.

    P.S. I noticed some inconsistency in the identification and classification of inputs (using classes instead of ids in some cases) and I'm unsure as to why you guys don't use arrays for checkboxes and radio buttons. I was able to work around this but it wasn't without a little critical thinking.

    Posted 9 years ago on Thursday January 20, 2011 | Permalink
  2. Here's an updated fix that helps protect against options being selected when they aren't available.

    <style type="text/css">#input_6_8 li { display:none; }</style>
    <script type="text/javascript">
    jQuery(document).bind("gform_page_loaded", function(event, formId, currentPageNumber) {
        var ainputs=[];
        jQuery("#input_6_2 li input:checkbox").each(function() { ainputs.push(jQuery(this).is(":checked")) });
        if (currentPageNumber==2) {
            //alert('New page loaded. Page: ' + currentPageNumber + ', Form: ' + formId + ', inputs: ' + ainputs.join('", "'));
            jQuery("#input_6_8 li").each(function() {
                    jQuery(this).hide();
                    jQuery(this).children("input").attr('disabled',true);
            });
            if (ainputs[0]==true) {
                    jQuery(".gchoice_8_0").fadeIn();
                    jQuery(".gchoice_8_0 input").removeAttr('disabled');
            }
            if (ainputs[1]==true) {
                    jQuery(".gchoice_8_1").fadeIn();
                    jQuery(".gchoice_8_1 input").removeAttr('disabled');
                    jQuery(".gchoice_8_2").fadeIn();
                    jQuery(".gchoice_8_2 input").removeAttr('disabled');
            }
            if (ainputs[2]==true) {
                    jQuery(".gchoice_8_3").fadeIn();
                    jQuery(".gchoice_8_3 input").removeAttr('disabled');
                    jQuery(".gchoice_8_4").fadeIn();
                    jQuery(".gchoice_8_4 input").removeAttr('disabled');
            }
            if (ainputs[3]==true) {
                    jQuery(".gchoice_8_2").fadeIn();
                    jQuery(".gchoice_8_2 input").removeAttr('disabled');
                    jQuery(".gchoice_8_4").fadeIn();
                    jQuery(".gchoice_8_4 input").removeAttr('disabled');
                    jQuery(".gchoice_8_5").fadeIn();
                    jQuery(".gchoice_8_5 input").removeAttr('disabled');
            }
        }
    });
    </script>
    Posted 9 years ago on Thursday January 20, 2011 | Permalink
  3. Fika
    Member

    Hi m4change, code looks like what I might be after.

    I am trying to populate once set of radio buttons based on another set of radio buttons. The radio buttons are in exact same form.

    So let’s say I have 1 set which is

    Radio Buttons 1
    * Red
    * Green
    * Blue

    Radio Buttons 2
    * 1
    * 2
    * 3

    So I would like to do a direct mapping. If a user chooses “red” then “1″ is dynamically chosen in the radio button 2 set and so on.

    Would your code work for this?

    Thanks

    Posted 7 years ago on Wednesday October 3, 2012 | Permalink
  4. You can find m4change's contact information on their profile page:
    http://www.gravityhelp.com/forums/profile/m4change

    If you would like help implementing a solution yourself, please let us know. Please include a URL for the page where your form is embedded.

    Posted 7 years ago on Wednesday October 3, 2012 | Permalink