Show\\hide fields based on check-box response

Joy Powers

Hello -

I am having trouble figuring out where to go to in the donation form set-up to have certain donation prompts show up only if certain check boxes are selected.

For example, go to:

http://connect.jewishfed.org/sf-teen

If you scroll down to the "Honoree Information" section and check "Yes," three new prompts show up.  They are hidden as soon as the box in unchecked again.

I would like to do the same thing with the eCard Notification in the section below it, and need some guidance on how to set it up.

Thank you.

Joy

Noah Cooper

Drop some JavaScript like this into an HTML Caption on the form:

<script type="text/javascript">
addOnLoadHandler(function(){
     showHideEcardFields();
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     Utils.addEvent(eCardSendCheckbox,'click',showHideEcardFields);
});
function showHideEcardFields(){
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     var eCardSendDateRow='ecard_send_date_Row';
     var eCardRecipientsRow='ecard_recpients_Row';
     var eCardSelectionsRow='select_grid_Row';
     var eCardSubjectRow='tribute_ecard_subject_Row';
     var eCardMessageRow='tribute_ecard_message_Row';
     var eCardSendCopyRow='e_card_copy_sender_Row';
     var eCardPreviewButtonRow='preview_button_Row';
     var eCardFields=new Array(eCardSendDateRow,eCardRecipientsRow,eCardSelectionsRow,eCardSubjectRow,eCardMessageRow,eCardSendCopyRow,eCardPreviewButtonRow);
     var i;
     if(eCardSendCheckbox.checked){
          for(i in eCardFields){
               if(document.getElementById(eCardFields)){
                    document.getElementById(eCardFields).style.position='static';
                    document.getElementById(eCardFields).style.top='0';
                    document.getElementById(eCardFields).style.left='0';
               }
          }
     }
     else{
          for(i in eCardFields){
               if(document.getElementById(eCardFields)){
                    document.getElementById(eCardFields).style.position='absolute';
                    document.getElementById(eCardFields).style.top='0';
                    document.getElementById(eCardFields).style.left='-999em';
               }
          }
     }
}
</script>

This will hide or show the Ecard fields when the user checks or unchecks the "send an Ecard" checkbox.

James Zetlen

Hi Joy,

The Show/Hide Honor Fields functionality is built into the Donations application. You're not missing any settings right under your nose: there isn't a point-and-click way to set up a different set of fields to show and hide. However, you're not the first to ask if you can do that! It's possible to do, but it takes a few extra steps.

A while back, for a similar request, I wrote some custom JavaScript code that will automatically show and hide the eCard fields based on the "Yes, I'd like to send an eCard" checkbox. If you create an HTML Caption field in your Donation Form, then paste the attached code (it's in a text file inside this ZIP file) into that HTML Caption, you'll find that the eCard fields start working the way you want. The HTML Caption will be invisible, so you can put it anywhere you want on the form--I recommend the bottom.

Let me know how this works!

Joy Powers

Noah & James -

THANK YOU very much for your timely help.  Noah, your code worked perfectly.

There were other problems with the original form that forced me to rebuild it.  You can see the show\\hide code in action at:

http://connect.jewishfed.org/sfmarin

Thanks again!

Joy