hide the eCard fields until the eCard checkbox is selected on a Donation Form

Alicia Searfoss

Has anyone found a way to hide the eCard fields until the eCard checkbox is selected on a Donation Form? I found this article that says it would take custom JavaScript:


https://kb.blackbaud.com/articles/Article/71701

Romany Nassief

Hi Alicia,


Have you checked those threads?

Show\\hide fields based on check-box response
Send an eCard only if a donation is given in honor of someone

Alicia Searfoss

Romany Nassief:

Hi Alicia,


Have you checked those threads?

Show\\hide fields based on check-box response
Send an eCard only if a donation is given in honor of someone

Hi Rom - this is exactly what I needed. I searched in the community and didn't find it. You are a life-saver, as always! Thanks!

Alicia Searfoss

Romany Nassief:

Hi Alicia,


Have you checked those threads?

Show\\hide fields based on check-box response
Send an eCard only if a donation is given in honor of someone

Hi Rom, I tested both Noah's code and James', but neither one worked. I tried putting it at the top of the field and at the bottom. The form still seems to work, but it it didn't hide the ecard option. If you have any other ideas, please let me know. Thanks again!

Romany Nassief

Can you provide the form URL?

Alicia Searfoss

Romany Nassief:

Can you provide the form URL?

Thanks for all the help. The URL is http://www.nativepartnership.org/site/Donation2?df_id=7269&mfc_pref=T&7269.donation=form1. This is Noah's code and I put it closer to the top of the form.


Thanks again!

Romany Nassief

Replace all script you added with this simpler one:

jQuery(document).ready(function() {

jQuery('#send_ecardname').change(function() {

jQuery('#ecard_send_date_row, #ecard_recpients_row, #select_grid_row, #tribute_ecard_subject_row, #tribute_ecard_message_row, #preview_button_row, #e_card_copy_sender_row').toggleClass('hidden', !this.checked);

}).change();

});

Romany Nassief

Alicia, as jQuery include is located at the bottom of your wrapper, you will need to move it to your wrapper head attributes so any page inline jQuery script can run.


I believe it is located in reus_pwna_global_scripts page where you can move jQuery include line and add it to your wrappers additional head attributes.

Alicia Searfoss

Somehow you knew I was struggling with why it wouldn't run. I'll do that next. I just don't want people to see all that text and abandon the form. Thank you!

Romany Nassief

You can try this sctipt first? if not working, you can go with jQuery include movement.

Y.use('jquery-ui', function(Y) {

jQuery(function() {

jQuery(document).ready(function() {

jQuery('#send_ecardname').change(function() {

jQuery('#ecard_send_date_row, #ecard_recpients_row, #select_grid_row, #tribute_ecard_subject_row, #tribute_ecard_message_row, #preview_button_row, #e_card_copy_sender_row').toggleClass('hidden', !this.checked);

}).change();

});

});

});

Alicia Searfoss

Romany Nassief:

Replace all script you added with this simpler one:

jQuery(document).ready(function() {

jQuery('#send_ecardname').change(function() {

jQuery('#ecard_send_date_row, #ecard_recpients_row, #select_grid_row, #tribute_ecard_subject_row, #tribute_ecard_message_row, #preview_button_row, #e_card_copy_sender_row').toggleClass('hidden', !this.checked);

}).change();

});

Did I mention how awesome you are? This looks beautiful in both IE and Firefox - a rarity. Thank you very much. I hope you have a great day - or night depending where you are.

Romany Nassief

Thanks Alicia - Glad to help!

Daniel Rojas 2

I don't know if this will be of help to anyone, but in case you want to make the e-card option hidden behind the "This is a tribute gift" checkbox.


<script type="text/javascript">

Y.use('jquery-ui', function(Y) {

jQuery(function() {

jQuery(document).ready(function() {

jQuery('#tribute_show_honor_fieldsname').change(function() {

jQuery('#send_ecard_row').toggleClass('hidden', !this.checked);

}).change();

});

});

});

</script>


<script type="text/javascript">

Y.use('jquery-ui', function(Y) {

jQuery(function() {

jQuery(document).ready(function() {

jQuery('#send_ecardname').change(function() {

jQuery('#ecard_send_date_row, #ecard_recpients_row, #select_grid_row, #tribute_ecard_subject_row, #tribute_ecard_message_row, #preview_button_row, #e_card_copy_sender_row').toggleClass('hidden', !this.checked);

}).change();

});

});

});

</script>