Conditionally Display/Hide Data Element on a Donation Form

Laura Murray

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.

Robert Pegg

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

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

This thread talks about this:
https://community.blackbaud.com/forums/viewtopic/1/54132

Brian Mucha

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>