Conditionally Display/Hide Data Element on a Donation Form

Laura Murray
Laura Murray
Sixth Anniversary
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
Does anyone have any experience conditionally showing/hiding a data element on a donation form based on a decision made on another data element?


For example: if someone can choose a from a list of items as a benefit (shirt, hat, water bottle)-- if they choose hat, a question about hat size is displayed; if they choose shirt, a question about shirt size; if they choose water bottle, no additional questions display.
Tagged:

Comments

  • Robert Pegg
    Robert Pegg
    Tenth Anniversary Name Dropper Participant Facilitator 1
    There a few things here to be aware of. First, create all questions on the form and set them to "NOT REQUIRED" (this is important because you can not require a question that may not be answered because it is not showing). Second hide the secondary question(s) with CSS or JavaScript on load (best to use jQuery $(document).ready). Hide the rows based on some identifying feature (look for a unique row name or elements and use this to navigate to the main container holding it (div or row). Third, add an event handler to the primary question that when changed shows or hides the secondary question to achieve the desired outcome.
  • Robert Pegg
    Robert Pegg
    Tenth Anniversary Name Dropper Participant Facilitator 1
    Also bear in mind you may need similar hide/show logic for question answers on the thank you page and autoresponder. You can conditionalize this logic based on values being present or not.
  • Brian Mucha
    Brian Mucha
    Tenth Anniversary Kudos 2 Participant Facilitator 1
    This thread talks about this:
    https://community.blackbaud.com/forums/viewtopic/1/54132
  • Brian Mucha
    Brian Mucha
    Tenth Anniversary Kudos 2 Participant Facilitator 1
    Or here is something similar in jQuery. 

    <style>
        #tribute_honoree_name_row {display: none;}
    </style>
    <script>

        jQuery(document).ready(function ($) {

                var tributeChange = function () {
                    if( $("#tribute_type").val() == "tribute_type_value1") {
                        $("#tribute_honoree_name_row").show();
                        $("#tribute_honoree_namename").focus();
                    } else {
                        $("#tribute_honoree_name_row").hide();
                    }
                };
                $("#tribute_type").on("change", function() { tributeChange (); });
         });
    </script>

Categories