CINXE.COM

<!DOCTYPE html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://whyy.org/wp-content/themes/whyy/images/icons/favicon-rebrand.ico"> <link rel="apple-touch-icon" sizes="180x180" href="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/icon-rebrand.png?v=1574286936000"> <link rel="icon" type="image/png" href="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/icon-rebrand3232.png?v=1574349779000" sizes="32x32"> <link rel="icon" type="image/png" href="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/icon-rebrand2.png?v=1574349331000" sizes="192x192"> <link rel="icon" type="image/png" href="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/icon-rebrand2.png?v=1574349331000" sizes="192x192"> <link rel="icon" type="image/png" href="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/icon-rebrand1616.png?v=1574349812000" sizes="16x16">  <link rel="stylesheet" href="https://use.typekit.net/izx6wme.css"> <script>try{Typekit.load({ async: false });}catch(e){}</script> <title>Support WHYY</title> <link rel='stylesheet' href='https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/join_rebrand.css?v=1573662023000' type='text/css' media='all' /> <link rel='stylesheet' id='style-main-css' href='https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/style_helio_rebrand.css?v=1573662024000' type='text/css' media='all' /> <script> window.enVGSFields = { 'transaction.ccnumber': { css: { 'color': '#232c32;', 'font-size': '16px', 'font-weight': '500', '@font-face': { 'font-family':'adelle-sans', 'src':"url(https://use.typekit.net/af/03e1a3/00000000000000003b9acf2d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format('opentype')" }, 'font-family': '"adelle-sans", Arial, Lucida Grande, sans-serif', }, }, 'transaction.ccvv': { css:{ 'color': '#232c32', 'font-size': '16px', 'font-weight': '500', '@font-face': { 'font-family': 'adelle-sans', 'font-style': 'normal', 'src': "url(https://use.typekit.net/af/03e1a3/00000000000000003b9acf2d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format('woff')" }, 'font-family': '"adelle-sans", Arial, Lucida Grande, sans-serif', } } } </script> <style> body{ background-color: #FFF; } .col-content { width: 100%; } /* sets max width for page/content */ .l-container--md{ max-width: 800px; } /* header container */ #header{ background-color: #0F1E8C !important; display: flex; justify-content: space-between; align-items: center; color: #fff !important; background-color: #0F1E8C !important; } #page{ min-height: 0; } /* spacing for phone number in header */ .header-right{ padding-right: 30px; } /* font styles for phone number in header */ .header-right a{ color: #fff !important; font-weight: 600; font-size: .75rem; } /* white space between form content and header */ .site-main{ padding-top:25px; } /* logo spacing in header so it is center vertically */ .site-logo{ padding: 0px 16px 45px 30px; margin-top: 0px !important; } /* removes underline that appears on hover for the header logo */ .site-logo a{ border-bottom: none; } /* white space between footer and form content */ #footer .footer--top{ margin-top: 30px; padding-top: 0px !important; } /* logo spacing in footer so it is center vertically */ #footer .site-logo{ padding: 20px 0; } .en__field__error, .en__errorList li{ font-weight: 600; color: #D6383A !important; font-size: 0.813rem !important; font-family: adelle-sans,Arial,Lucida Grande,sans-serif !important; } .en__errorList{ list-style:none !important; } /* sets font for text in the footer to adelle to match the website (paragraph text on form is utopia std) */ footer p, footer li{ font-family: adelle-sans,Arial,Lucida Grande,sans-serif !important; } /* sets font size for the mission message in the footer*/ footer p{ font-size: 1rem; line-height: 1.5rem; } /* sets font size for the text under Support WHYY, Inside WHYY, and Contact Us in footer*/ footer li, .contact-item p{ font-size: .9375rem; line-height: 1.875rem; } /* text styles for headers, body copy, and lists on mobile. applies if text is in a form block or in a text block */ h1, form h1{ color: #232c32; !important; font-size: 2.125rem !important; line-height: 2.75rem !important; } h2, form h2{ font-size: 1.31rem !important; line-height: 1.938rem !important; } h3, form h3{ font-size: 1.125rem !important; line-height: 1.75rem !important; } form h1, form h2, form h3{ margin-bottom: 15px !important; } p, li, form p{ font-size: 1.125rem !important; color: #232c32; line-height: 1.7em; font-family: utopia-std, serif !important; } /*creates white space around body copy/paragraphs. the margin is removed from the last paragraph because otherwise there would be extra white space between the a line of text and a field or next block*/ p, form p{ margin-bottom: 0.9375rem !important; } form p:last-child{ margin-bottom: 0 !important; } ul{ margin: 0 0 0 25px; } /*makes an underline appear on links on hover, style copied from website*/ a:hover{ color: #0F1E8C; border-bottom: 2px solid; transition: none; } /*text styles for labels for fields*/ label{ font-weight: 700; font-size: 0.85rem; color: #49545A; line-height: 1.7em; padding: 0 0.275rem; } /*this removes a margin-right: 1% rule. this original style caused odd spacing with labels*/ form label{ margin-right:0; } /* hr and divider styles */ hr{ height: 1px; background: #d3d3d4; } .divider{ height: 2px; background: #232c32; margin: 20px 0; } br{ display: block !important; } /* hides hidden field types, the passport activation field (.en__field--NOT_TAGGED_70, .en__field--NOT_TAGGED_71), the header for the error list, the second recurring frequency field that we need for ROI, etc.*/ .en__hidden, .en__field--othamt3, .en__field__item--hidden, .en__field--NOT_TAGGED_70, .en__field--recurrfreq, .en__field--trbopts, .en__errorHeader, .amount .en__field--recurrfreq, .en__field--NOT_TAGGED_71, .en__field--145814, .en__field--payment-processing-fee-covered{ display: none !important; } /* .hidden-fields{ display: none; } */ /*removes a padding: 6px 0 rule that caused inconsistent spacing*/ .en__field__item{ padding: 0px !important; } /*this style is needed for some labels for certain field types. if we don't have it, the label for comments stacks strangely, and various fields under payment type will not be spaced out correctly*/ .en__field__label{ width: unset !important; } /*this overwrites a width: 250px rule set on the textarea field and text fields from a linked stylesheet.*/ .en__field__input--text, .en__field__input--textarea{ width: 100% !important; } /*this overwrites a min-width: 250px rule set on the select field.*/ .en__field__input--select{ min-width: 0px !important; } /*not sure if we need all of these field types to have this rule, but it isn't causing any visible issues*/ .en__field__element--telephone, .en__field__element--email, .en__field__element--select, .en__field__element--splitselect, .en__field__element--text, .en__field__element--number, .en__field__element--radio, .en__field__element--textarea, .en__field--thank-you-gift-or-no-gift .en__field__item, .en__field--thank-you-gift-or-no-gift-simple-version- .en__field__item, .en__field--tv-versus-fm .en__field__element--checkbox, .en__field--tv-versus-fm .en__field__element--checkbox .en__field__item { display: block !important; } /*this margin rule overwrites a margin from a linked stylesheet */ form input[type=text], form select, form textarea{ margin: 0px; } /*this overwrites some styles from a linked stylesheet. originally the hieght of fields was set with the padding — this lead to inconsistent hieghts for different field types. instead, setting a static height rule causes uniform spacing. */ form input[type=text], form input[type=email], form input[type=password], form input[type=date], form textarea, form input[type=tel], select{ border-radius: 4px; padding: 0 15px; height: 50px; } .en__field--firstName, .en__field--lastName, .en__field--city, .en__field--address2, .en__field--region, .en__field--postcode, .en__field--emailAddress, .en__field--phoneNumber, .en__field--address1, .en__field--ccnumber, .en__field--ccvv, .en__field--ccexpire, .en__field--bankAccountType, .en__field--bankRoutingNumber, .en__field--bankAccountNumber, .en__field--comments, .en__field--feeCover{ flex-basis: calc(100% - 0.55rem); } .en__field--ccexpire .en__field__item{ width: 49%; } .en__field__input--vgs{ width: 100% !important; height:50px !important; border-radius: 4px !important; border: 1px solid #d3d3d4 !important; } .en__field__element--vgs{ display: block !important; margin: 0px; } /*thank you gift list styles. tried to write them for all radio fields, but this messsed up styling for the donation amounts and payment type buttons*/ .en__field--135736 label{ font-size: 1.31rem !important; line-height:1.938rem !important; } .en__field--135736 div label{ font-size: 1rem !important; } .en__field--135736 div .en__field__item{ padding: 6px 0 !important; } .en__field--135736 div .en__field__item:last-child{ padding: 6px 0 0 0 !important; } /*radio field styles*/ .en__field__input--radio, .en__field__label { display: inline !important; vertical-align: middle !important; } form input[type=radio]{ width: 24px; height:24px; } form input[type=radio]:checked:before{ width: 24px; height: 24px; border-radius: 20px; position: static; border: 7px solid #2638c4 !important; } /*removes a margin-top: -1px rule from a linked stylesheet*/ .en__field__input--radio{ margin-top: 0px !important; } /* all checkbox styles */ form input[type=checkbox]{ display:none; } .en__field__element--checkbox label{ padding-left: 40px; position: relative; font-weight: 400; vertical-align: middle; } .en__field__element--checkbox label::before{ content: ''; cursor: pointer; position: absolute; width: 30px; height: 30px; top: 0px; left: 0px; background: #fff; border: 1px solid #d3d3d4; border-radius:2px; } .en__field__element--checkbox label{ display:inline-block !important; } .en__field__element--checkbox input[type=checkbox]:checked + label:after{ opacity:1; } .en__field__element--checkbox label::after{ opacity:0; content:''; position: absolute; width: 18px; height: 8px; background: transparent; top: 10px; left: 6px; border: 4px solid #232c32; border-top: none; border-right: none; transform: rotate(-45deg); cursor: pointer; } .en__field--checkbox .en__field__item { margin-bottom: 20px; /* Adjust as needed */ } .en__field--checkbox .en__field__item:last-child { margin-bottom: 0; } /* eft checkbox styles */ .paymentType .en__field--eft-terms .en__field__element--checkbox label{ font-weight: 600; } /* donation button and payment type button styles. the amount class is needed for error checking.*/ .en__field__input--other{ width: 100% !important; } .en__field--paymenttype{ width: 100%; } .en__field--dirgift .en__field__item{ width: 100%; } .amount .en__field, .donate-form-block .en__field{ margin-right: 0.275rem; margin-left: 0.275rem; display: flex; flex-direction: column; } /* form block styles. sets the layout on membership information and payment type. */ .donate-form-block{ width: 100%; display: flex; flex-wrap: wrap; } .major-donor .en__field--donationAmt .en__field__item{ flex: 1 1 100% !important; } .amount .en__field--donationAmt input[type=radio], .amount .en__field--recurrpay input[type=radio], .paymentType .en__field--paymenttype input[type=radio]{ width: 0px; height: 1px; margin-right: 0px !important; position: absolute; z-index: -5; } .en__field--recurrpay .en__field__element--radio, .en__field--donationAmt .en__field__element--radio, .en__field--paymenttype .en__field__element--radio{ display: flex !important; flex-wrap: wrap; flex-direction: row; margin: -0.275rem; } .en__field--recurrpay .en__field__item, .en__field--donationAmt .en__field__item, .en__field--paymenttype .en__field__item{ margin: 0.275rem; text-align: center; background-color: #d3d3d4; display: flex; width: auto; padding: 0px; border-radius: 4px; flex: 1; } .en__field--recurrpay .en__field__item label, .en__field--donationAmt .en__field__item label, .en__field--paymenttype .en__field__item label{ font-weight: bold; font-size: 16px; padding: 13px 16px; margin: 0; flex: 1; } .en__field--recurrpay .en__field__item label:hover, .en__field--donationAmt .en__field__item label:hover, .en__field--paymenttype .en__field__item label:hover { color: #fff !important; } .en__field--recurrpay .en__field__item:hover, .en__field--recurrpay .en__field__item input:checked, .en__field--donationAmt .en__field__item:hover, .en__field--donationAmt .en__field__item input:checked, .en__field--paymenttype .en__field__item:hover, .en__field--paymenttype .en__field__item input:checked { background-color: #2638c4 !important; border-radius: 4px; } .en__field--recurrpay .en__field__item input:checked+label, .en__field--donationAmt .en__field__item input:checked+label, .en__field--paymenttype .en__field__item input:checked+label { color: #fff !important; background-color: #2638c4 !important; border-radius: 4px; } .en__field--recurrpay input[type=radio], .en__field--donationAmt input[type=radio], .en__field--paymenttype input[type=radio] { width: 0px; height: 1px; margin-right: 0px !important; } .en__field--recurrpay input[type=radio]:before, .en__field--donationAmt input[type=radio]:before, .en__field--paymenttype input[type=radio]:before { width: 0px !important; height: 1px !important; display: none !important; } /* button style */ .sq_btn a { background-color: #2638C4!important; color: #fff !important; padding: 10px 25px; vertical-align: middle; text-align: center; font-weight: bold; font-size: 24px; border-radius: 4px; } .sq_btn a:hover { background-color: #0F1E8C !important; } /* submit button style */ form button { color: #fff !important; padding: 0 15px; height: 50px; vertical-align: middle; text-align: center; font-weight: bold; font-size: 16px; border-radius: 4px; margin: 15px 0; width: 100%; } form button:hover { background-color: #0F1E8C !important; color: #fff !important; } /* lock and security message styles */ .lock-text{ margin: 0 0 0 10px; font-size: 14px !important; font-weight: 600 !important; font-family: adelle-sans,Arial,Lucida Grande,sans-serif !important; } .lock-container{ display: flex; width: 100%; } .lock-icon{ margin-top:5px; } /* block styles. removes extra white space between blocks. */ .en__component--copyblock { padding: 0px !important; } .en__component--row{ padding: 0px !important; } @media only screen and (min-width: 640px){ /* desktop text styles */ .site-logo{ padding: 20px 16px 45px 30px; } h1, form h1{ font-size: 2.375rem !important; line-height: 3rem !important; } h2, form h2{ font-size: 2rem !important; line-height: 2.625rem !important; } h3, form h3{ font-size: 1.625rem !important; line-height: 2.375rem !important; } p, li, form p{ font-size: 1.3125rem !important; } .en__field--firstName, .en__field--lastName, .en__field--city{ flex-basis: calc(50% - 0.55rem) } /* desktop field styles */ .en__field--emailAddress, .en__field--address1{ flex-basis: calc(60% - 0.55rem); } .en__field--phoneNumber, .en__field--address2, .en__field--bankRoutingNumber, .en__field--bankAccountNumber{ flex-basis: calc(40% - 0.55rem) } .en__field--region{ flex-basis: calc(30% - 0.55rem) } .en__field--postcode, .en__field--bankAccountType{ flex-basis: calc(20% - 0.55rem); } .en__field--ccnumber{ flex-basis: calc(50% - 0.55rem) } .en__field--ccexpire{ flex-basis: calc(35% - 0.55rem) } .en__field--ccvv{ flex-basis: calc(15% - 0.55rem); } /* desktop donation button and payment type button styles */ .major-donor .en__field--donationAmt .en__field__item{ flex: 1 1 25% !important; } .en__field--recurrpay .en__field__item--other, .en__field--donationAmt .en__field__item--other { position: relative !important; width: unset !important; top: unset !important; left: unset !important; } /* desktop lock and security message styles */ .lock-container{ align-items:center; } .lock-icon{ margin-top:0px; } #footer .footer--top{ padding: 30px 0 0 0 !important; } footer p{ font-size: 1.5rem !important; line-height: 2.125rem !important; } footer li, .contact-item p{ font-size: .9375rem !important; line-height: 1.875rem !important; } } @media(max-width: 767px){ .en__field--recurrpay .en__field__item input[type=radio] + label, .en__field--donationAmt .en__field__item input[type=radio] + label, .en__field--paymenttype .en__field__item input[type=radio] + label { width: 100% !important; } } @media(min-width: 1024px){ .site-main{ padding-top:40px; } } </style>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KBG3KRK');</script>   <meta name="title" content=""/> <meta property="og:title" content=""/> <meta property="og:description" content=""/> <meta name="description" content=""/> <meta property="og:image" content=""/> <link rel="canonical" href="https://support.whyy.org/page/12775/donate/1?locale=en-US"/> <meta property="og:url" content="https://support.whyy.org/page/12775/donate/1?locale=en-US"/> <link rel="image_src" href=""/> <link href='/pageassets/css/enPage.css?v=4.0.0' rel='stylesheet' type='text/css' /> <script nonce='eed2ac9e-bb96-47e6-ac13-679e92e8a63e'>var pageJson = {"clientId":10047,"campaignPageId":12775,"campaignId":38199,"pageNumber":1,"pageCount":2,"pageName":"Join: Primary Pledge Form","pageType":"donation","locale":"en-US","redirectPresent":false,"giftProcess":false};</script> <script src='/page/12775/pagedata.js?locale=en-US&ea.profile.id=0'></script> <script src='/pageassets/js/enPage.js?v=4.0.0'></script> </head> <body class="basic_page-template-default single single-basic_page postid-267842 logged-in admin-bar no-customize-support join">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KBG3KRK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> <header id="header" class="site-header" role="banner"> <div class="header-left"> <div class="site-logo"> <a href="https://whyy.org" rel="home"><img src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/WHYY+PBS+NPR_rgb+white.png?v=1712675452000"></a> </div> </div> <div class="header-right"> <a href="tel:+1-888-345-9499"> Give by phone<br>1-888-345-9499 </a> </div> </header> <main id="main" class="site-main" role="main"> <div class="l-container--md"> <div class="flex-grid article-body"> <div class="col-content"> <article id="post-267842" class="post-267842 basic_page type-basic_page status-publish hentry"><form method="post" id="pb_12775" name="pb_Join_Primary_Pledge_Form" action="/page/12775/donate/2" class="en__component en__component--page"> <input type="hidden" name="hidden" class="en__hiddenFields" value=""> <input type="hidden" name="sessionId" value="b0bb9e44c2b644aaaae81ad0f16888fe-use2-prd-web4"> <ul role="alert" class="en__errorList"> </ul> <div class="en__component en__component--row en__component--row--1"> <div class="en__component en__component en__component--column"> <div class="en__component en__component--codeblock"><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script></div> <div class="en__component en__component--codeblock"><script> $( document ).ready(function() { var giftList = $('#en__field_transaction_othamt1'); giftList.change(function(){ var donationFrequency = $('input[name="transaction.recurrpay"]:checked').val(); var otherAmtBtn = $('input[value="Other"]'); var otherAmt = $('input[name="transaction.donationAmt.other"]').val(); var selectedGift = $('#en__field_transaction_othamt1 option:selected').html(); var GiftValueRegex = /\$(.*)\s-\s/; var giftNameRegex = /\-\s(.*)/; var matchedName = giftNameRegex.exec(selectedGift); var matched = GiftValueRegex.exec(selectedGift); var giftVal = parseFloat(matched[1]); var giftName = $('#en__field_supporter_NOT_TAGGED_70'); var freebie = $('input[name="transaction.dirgift"]'); var freebieLabel = 'Wine Spectator Subscription: 15 issues'; if(otherAmt.length == 0){ var cartLevel = $('input[name="transaction.donationAmt"]:checked').val(); } else { var cartLevel = parseFloat(otherAmt); console.log(cartLevel); } if(donationFrequency === "once" || donationFrequency === "Y") { if(giftVal > (cartLevel)) { alert("We’re sorry. That gift isn’t available at your donation amount. Please choose a different gift or update your donation amount."); $('select[name="transaction.othamt1"] option:eq(0)').prop("selected", true); } } //populating Premium Name field if(giftList.val != "Please select one..."){ if($(freebie).is(':checked')){ $('#en__field_supporter_NOT_TAGGED_70').val(matchedName[1].concat(", ",freebieLabel)); // giftName = matchedName[1].concat(", ",freebieLabel); } else { $('#en__field_supporter_NOT_TAGGED_70').val(matchedName[1]); // giftName = matchedName[1]; } } else { if($(freebie).is(':checked')){ $('#en__field_supporter_NOT_TAGGED_70').val(freebieLabel); } else { $('#en__field_supporter_NOT_TAGGED_70').val("You have directed your full donation to WHYY - giftList change function."); } } }); //Wine Spectator code var freebie = $('input[name="transaction.dirgift"]'); freebie.click(function(){ var giftList = $('#en__field_transaction_othamt1'); var giftName = $('#en__field_supporter_NOT_TAGGED_70').html(); var selectedGift = $('#en__field_transaction_othamt1 option:selected').html(); var giftNameRegex = /\-\s(.*)/; var freebieLabel = 'Wine Spectator Subscription: 15 issues'; var matchedName = giftNameRegex.exec(selectedGift); console.log(giftList.val()); //populating Premium Name field if(giftList.val() != "Please select one . . ."){ if($(freebie).is(':checked')){ $('#en__field_supporter_NOT_TAGGED_70').val(matchedName[1].concat(", ",freebieLabel)); } else { $('#en__field_supporter_NOT_TAGGED_70').val(matchedName[1]); } } else { if($(freebie).is(':checked')){ $('#en__field_supporter_NOT_TAGGED_70').val(freebieLabel); } else { $('#en__field_supporter_NOT_TAGGED_70').val("You have directed your full donation to WHYY - wine spectator function."); } } console.log(giftName); }); }); </script></div> <div class="en__component en__component--codeblock"><script> window.onload = function () { var roiRouting = document.getElementById('en__field_transaction_othamt3'); var routing = document.getElementById('en__field_supporter_bankRoutingNumber'); function routingValuePass(){ if(routing.value.length !== 0){ roiRouting.value = routing.value; console.log(roiRouting.value); } } routing.addEventListener('change', routingValuePass); /*lets deal with people trying to circumvent checks*/ var giftList = document.getElementById('en__field_transaction_othamt1'); var amtAndRecurrBtns = document.querySelectorAll(".en__field--recurrpay, .en__field--donationAmt") if(amtAndRecurrBtns) { Array.from(amtAndRecurrBtns).forEach((elem) => { elem.addEventListener("change", function(event) { if((giftList.options[giftList.selectedIndex].value != "Please select one...") && (giftList.options[giftList.selectedIndex].value != "Please select one . . .")){ alert("You've changed your donation amount. Please reselect your thank-you gift."); giftList.options[giftList.selectedIndex].selected = false; } }); }); } var otherAmt2 = document.querySelector('[name="transaction.donationAmt.other"]'); otherAmt2.addEventListener('change', resetTYG_otherAmtChange); var otherAmt_counter = 0; // Initialize to zero function resetTYG_otherAmtChange () { if (otherAmt_counter++ > 0) { alert("You've changed your donation amount. Please reselect your thank-you gift."); giftList.options[giftList.selectedIndex].selected = false; } console.log(otherAmt_counter); } } </script></div> <div class="en__component en__component--codeblock"><script src="https://doublethedonation.com/api/js/ddplugin.js"></script> <link href="https://doublethedonation.com/api/css/ddplugin.css" rel="stylesheet"/></div> <div class="en__component en__component--codeblock"> <script>var DDCONF = {API_KEY: "Mzg0YWJlMDAtMzA5"};</script> <div id="dd-company-name-input"></div> <script> /* ? This script is for page 1 - it saves the company name to a cookie. This function checks for DOM changes in the dd plugin to grab the user-inputted company name. We pass this company name to saveCompany, which saves it as a cooke for use on the post-action page. */ // wait until dtd scripts have injected the plugin setTimeout(function() { var ddPlugin = document.querySelector(".dtd-streamlined-plugin"); // construct cookie and save it function setCookie(name, value, expires) { console.log('set cookie'); // set cookie var n = name; var val = value; var exp = ""; var days = expires; var date = new Date(); date.setTime(date.getTime() + (days*24*60*60*1000)); expires = "; expires=" + date.toUTCString(); // ! template literals do not seem to work in EN codeblocks console.log("cookie: ", n + "=" + val + exp + "; path=/"); document.cookie = n + "=" + val + exp + "; path=/"; } // ensure plugin exists on the page if( ddPlugin !== null ) { // watch plugin for DOM changes // we can verify company was selected by checking value of doubledonation_status field ddPlugin.addEventListener("change", function() { // wait for DOM to change setTimeout(function() { var matchStatus = document.querySelector(".dtd-streamlined-plugin input[name='doubledonation_status']").value; console.log(matchStatus); // if doubledonation_status value = found, company name selected if(matchStatus === "found"){ // get data from fields var companyID = document.querySelector(".dtd-streamlined-plugin input[name='doublethedonation_company_id']").value; // pass data to setCookie function setCookie("DtDcompanyID", companyID, 1); setCookie("DtDStatus", matchStatus, 1); } }, 400); }); } else { console.log("Error: cannot save company name. DtD plugin was not found."); } }, 2000); </script></div> </div> </div> <div class="en__component en__component--row en__component--row--1"> <div class="en__component en__component en__component--column en__component--column--1"> <div class="en__component en__component--copyblock" style=" " > <hr class="divider" /> <h2>Payment Information</h2> </div> <div class="en__component en__component--formblock paymentType donate-form-block" style=""> <div class="en__field en__field--radio en__field--917856 en__field--paymenttype en__mandatory"> <div class="en__field__element en__field__element--radio " > <div class="en__field__item"> <input id="en__field_transaction_paymenttype0" checked type="radio" class="en__field__input en__field__input--radio" value="CC" name="transaction.paymenttype" /> <label for="en__field_transaction_paymenttype0" class="en__field__label en__field__label--item" >Credit Card</label> </div> <div class="en__field__item"> <input id="en__field_transaction_paymenttype1" type="radio" class="en__field__input en__field__input--radio" value="EFT" name="transaction.paymenttype" /> <label for="en__field_transaction_paymenttype1" class="en__field__label en__field__label--item" >Bank Account</label> </div> </div> </div> <div class="en__field en__field--vgs en__field--917859 en__field--ccnumber en__mandatory"> <label for="en__field_transaction_ccnumber" class="en__field__label" style="">*Credit Card Number:</label> <div class="en__field__element en__field__element--vgs"> <input type="hidden" name="transaction.ccnumber" /> <div id="en__field_transaction_ccnumber" class="en__field__input en__field__input--vgs"> </div> </div> </div> <div class="en__field en__field--splitselect en__field--917862 en__field--ccexpire en__mandatory"> <label for="en__field_transaction_ccexpire" class="en__field__label" style="">*Expiration Date:</label> <div class="en__field__element en__field__element--splitselect"> <input type="hidden" name="transaction.ccexpire.delimiter" value=""> <div class="en__field__item"> <select id="en__field_transaction_ccexpire" class="en__field__input en__field__input--splitselect" name="transaction.ccexpire" > <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> <div class="en__field__item"> <select class="en__field__input en__field__input--splitselect" name="transaction.ccexpire" > <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> </select> </div> </div> </div> <div class="en__field en__field--vgs en__field--917858 en__field--ccvv en__mandatory"> <label for="en__field_transaction_ccvv" class="en__field__label" style="">*CVV:</label> <div class="en__field__element en__field__element--vgs"> <input type="hidden" name="transaction.ccvv" /> <div id="en__field_transaction_ccvv" class="en__field__input en__field__input--vgs"> </div> </div> </div> <div class="en__field en__field--checkbox en__field--1031197 en__field--feeCover"> <div class="en__field__element en__field__element--checkbox " > <div class="en__field__item"> <input id="en__field_transaction_feeCover" type="checkbox" class="en__field__input en__field__input--checkbox" value="Y" name="transaction.feeCover" /> <label for="en__field_transaction_feeCover" class="en__field__label en__field__label--item" >I want my donation to go further by covering the processing fee.</label> </div> </div> </div> <div class="en__field en__field--checkbox en__field--question en__field--963338 en__field--payment-processing-fee-covered"> <label class="en__field__label" style="">Cover processing fee?</label> <div class="en__field__element en__field__element--checkbox " > <div class="en__field__item"> <input id="en__field_supporter_questions_963338" type="checkbox" class="en__field__input en__field__input--checkbox" value="Y" name="supporter.questions.963338" /> <label for="en__field_supporter_questions_963338" class="en__field__label en__field__label--item" >Yes</label> </div> </div> </div> <div class="en__field en__field--select en__field--917863 en__field--bankAccountType en__mandatory"> <label for="en__field_supporter_bankAccountType" class="en__field__label" style="">*Account Type:</label> <div class="en__field__element en__field__element--select"> <select id="en__field_supporter_bankAccountType" class="en__field__input en__field__input--select" name="supporter.bankAccountType" > <option value="Checking">Checking</option> <option value="Savings">Savings</option> </select> </div> </div> <div class="en__field en__field--text en__field--917857 en__field--bankRoutingNumber en__mandatory"> <label for="en__field_supporter_bankRoutingNumber" class="en__field__label" style="">*Routing Number:</label> <div class="en__field__element en__field__element--text"> <input id="en__field_supporter_bankRoutingNumber" type="text" class="en__field__input en__field__input--text" name="supporter.bankRoutingNumber" value="" /> </div> </div> <div class="en__field en__field--text en__field--917861 en__field--bankAccountNumber en__mandatory"> <label for="en__field_supporter_bankAccountNumber" class="en__field__label" style="">*Account Number:</label> <div class="en__field__element en__field__element--text"> <input id="en__field_supporter_bankAccountNumber" type="text" class="en__field__input en__field__input--text" name="supporter.bankAccountNumber" value="" /> </div> </div> <div class="en__field en__field--checkbox en__field--question en__field--135132 en__field--eft-terms en__mandatory"> <div class="en__field__element en__field__element--checkbox " > <div class="en__field__item"> <input id="en__field_supporter_questions_135132" type="checkbox" class="en__field__input en__field__input--checkbox" value="I agree" name="supporter.questions.135132" /> <label for="en__field_supporter_questions_135132" class="en__field__label en__field__label--item" >I authorize WHYY to withdraw my donation from my bank account according to the amount and schedule I have specified. This authorization remains in effect until I notify WHYY that I wish to change or end this agreement. To contact WHYY, call 1-215-351-0511.</label> </div> </div> </div> <div class="en__field en__field--text en__field--917860 en__field--othamt3"> <label for="en__field_transaction_othamt3" class="en__field__label" style="">Bank Routing Transit Number ROI</label> <div class="en__field__element en__field__element--text"> <input id="en__field_transaction_othamt3" type="text" class="en__field__input en__field__input--text" name="transaction.othamt3" value="" /> </div> </div> <div class="en__field en__field--checkbox en__field--919358 en__field--dirgift"> <label class="en__field__label" style="">You can choose this additional gift:</label> <div class="en__field__element en__field__element--checkbox " > <div class="en__field__item"> <input id="en__field_transaction_dirgift" type="checkbox" class="en__field__input en__field__input--checkbox" value="MWINE" name="transaction.dirgift" /> <label for="en__field_transaction_dirgift" class="en__field__label en__field__label--item" >Wine Spectator Subscription: 15 issues</label> </div> </div> </div> </div> <div class="en__component en__component--codeblock"><p id='processing-fee'></p></div> </div> </div> <div class="en__component en__component--row en__component--row--1"> <div class="en__component en__component en__component--column en__component--column--1"> <div class="en__component en__component--formblock" style=""> <input type="hidden" class="en__field__input en__field__input--hidden" name="supporter.appealCode" value="TMD0000WE001" /> </div> <div class="en__component en__component--copyblock" style=" " > <hr class="divider" /> <h2>Review & Confirm Donation</h2> </div> <div class="en__component en__component--codeblock"><p style="margin-bottom: 20px;" id="summary-text">You are donating $20 monthly. Thank you!</p> <style> .total-donation-amount { display: block; margin-top: 4px; /* Adjust this value to control the spacing */ font-weight: bold; } </style> <script> // Function to update the summary text and fee cover text function updateSummary() { const donationAmtInput = document.querySelector('input[name="transaction.donationAmt"]:checked'); let donationAmt; if (donationAmtInput.value === 'Other') { donationAmt = parseFloat(document.querySelector('input[name="transaction.donationAmt.other"]').value) || 0; } else { donationAmt = parseFloat(donationAmtInput.value); } const isOneTime = document.querySelector('input[name="transaction.recurrpay"]:checked').value === 'once'; const frequencyText = isOneTime ? ' one-time' : ' per month'; const paymentType = document.querySelector('input[name="transaction.paymenttype"]:checked').value; const isCreditCard = paymentType === 'CC'; const feeCoverCheckbox = document.querySelector('input[name="transaction.feeCover"]:checked'); const feeCover = donationAmt * 0.025; const totalAmount = (donationAmt + feeCover).toFixed(2); let summaryText = 'You are donating $' + donationAmt.toFixed(2) + frequencyText + '.'; const feeCoverLabel = document.querySelector('label[for="en__field_transaction_feeCover"]'); if (isCreditCard) { feeCoverLabel.innerHTML = 'I will cover the processing fee of $' + feeCover.toFixed(2) + ' so all of my donation will go to WHYY.'; if (feeCoverCheckbox) { summaryText += ' You have opted-in to help offset the credit card processing fee of 2.5%, adding $' + feeCover.toFixed(2) + ' to your donation.'; summaryText += ' Your total' + (frequencyText === ' one-time' ? '' : ' monthly') + ' gift amount is $' + totalAmount + '.'; // Update the text under the fee cover label based on the donation frequency const additionalText = isOneTime ? 'Your new total donation amount is $' + totalAmount + '.' : 'Your new monthly donation amount is $' + totalAmount + '.'; feeCoverLabel.innerHTML += '<span class="total-donation-amount">' + additionalText + '</span>'; } } else { feeCoverLabel.innerText = 'I want my donation to go further by covering the processing fee.'; } document.getElementById('summary-text').innerText = summaryText; } // Event listener for form changes document.addEventListener('change', updateSummary); // Initial update on page load window.addEventListener('load', updateSummary); </script> </div> <div class="en__component en__component--formblock" style=""> <div class="en__captcha"> <div class="g-recaptcha" data-sitekey="6LdjFAUTAAAAAOR0XkVp_ORlGPrlOB_WMer01f2H"></div> </div> </div> <div class="en__component en__component--copyblock" style=" " > <p>Please click the button below once. You will receive a confirmation page shortly.</p> </div> <div class="en__component en__component--formblock" style=""> <div class="en__submit"><button style="">GIVE TO WHYY</button></div> </div> <div class="en__component en__component--copyblock" style=" " > <div class="lock-container"><img alt="lock icon" class="lock-icon" data-ratio-lock="true" data-unit="%" src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/lock.png?v=1709324561000" style="height: 40px;" /> <p class="lock-text" style="font-size: 14px;font-weight:800;">We take data and privacy seriously. Your payment information is secure and will be used only to process your gift. View the WHYY <a href="https://whyy.org/privacy/">privacy policy</a> and <a href="https://whyy.org/membership-list-policy/">membership list policy</a>.</p> </div> </div> </div> </div> </form></article> </div> </div> </div> </main>  </div> <footer id="footer" class="site-footer"> <div class="footer--top l-container--md border--top row-inside--md cf"> <div class="flex-grid"> <div class="col-flex--1 gap--right-md"> <h1 class="site-logo"> <a href="https://whyy.org/" rel="home"><img src="https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10047/rebrand-logo.svg?v=1573663559000"></a> </h1> <div class="site-intro row-outside--sm"> <p>WHYY connects you to your community and the world by delivering reliable information and worthwhile entertainment.</p> </div> <div class="site-contacts row-outside--md"> <h3 class="f--label">Contact Us</h3> <div class="contact-item"> <strong>Philadelphia</strong> <p> Phone: <a href="tel:+1 (215) 351-1200">215.351.1200</a><br /> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5f4a4740494a48406b5c4352520544594c">[email protected]</a><br /> 150 N 6th Street<br /> Philadelphia, Pa 19106 </p> <p>EIN: 23-1438083</p> </div> </div> </div> <div class="col-flex--1"> <div class="site-menu-item"> <h3 class="f--label">Support WHYY</h3> <ul id="menu-footer-menu-programs" class="menu"> <li id="menu-item-273529" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-273529"><a href="https://support.whyy.org/page/12347/hub/1">Update My Member Information</a></li> <li id="menu-item-273530" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-273530"><a href="https://whyy.org/member-benefits/"> Member Benefits</a></li> <li id="menu-item-271290" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-271290"><a href="https://whyy.org/donor-program/"> Donor Program</a></li> <li id="menu-item-274485" class="menu-item menu-item-type-post_type menu-item-object-program menu-item-274485"><a href="https://whyy.org/volunteer/"> Volunteer</a></li> <li id="menu-item-271288" class="menu-item menu-item-type-post_type menu-item-object-program menu-item-271288"><a href="https://whyy.org/matching-gifts/">Matching Gifts</a></li> <li id="menu-item-271282" class="menu-item menu-item-type-post_type menu-item-object-program menu-item-271282"><a href="https://whyy.org/support/planned-gifts/">Planned Gifts</a></li> <li id="menu-item-271283" class="menu-item menu-item-type-post_type menu-item-object-program menu-item-271283"><a href="https://whyy.org/vehicle-donation/">Vehicle Donation </a></li> <li id="menu-item-271291" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-271291"><a href="https://whyy.org/license-plate/">License Plate</a></li> </ul> </div> <div class="site-menu-item"> <h3 class="f--label">Inside WHYY</h3> <ul id="menu-footer-menu-main-1" class="menu"> <li id="menu-item-272001" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-272001"><a href="https://whyy.org/about/">About</a> </li> <li id="menu-item-273991" class="menu-item menu-item-type-post_type menu-item-object-basic_page menu-item-273991"><a href="https://whyy.org/contact-us/">Contact Us</a></li> <li id="menu-item-272168" class="menu-item menu-item-type-post_type menu-item-object-basic_page menu-item-272168"><a href="https://whyy.org/corporate-underwriting/">Corporate Underwriting</a></li> <li id="menu-item-274960" class="menu-item menu-item-type-post_type menu-item-object-basic_page menu-item-274960"><a href="https://whyy.org/about/directions/">Directions</a></li> <li id="menu-item-276044" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-276044"><a href="https://stations.fcc.gov/station-profile/whyy-tv">Public File</a></li> </ul> </div> <div class="site-menu-item"></div> <div class="site-cta-buttons"></div> </div> </div> </div> <div class="footer--bottom l-container--md border--top row-inside--sm cf"> <div class="flex-grid"> <div class="col-flex--1"> <div class="site-copyright"> <p> © WHYY MMXXII </p> </div> <div class="site-menu-utility"> <ul id="menu-footer-menu-utility" class="menu"> <li id="menu-item-1320" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1320"><a href="https://whyy.org/privacy/">Privacy Policy</a></li> <li id="menu-item-1321" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1321"><a href="https://whyy.org/terms-use-whyy-org/">Terms of Use</a></li> </ul> </div> </div> <div class="col-flex--1"> <div class="site-footer-partners"> <p> WHYY is partnered with </p> <a href="http://npr.org" title="npr" target="_blank"><img src="https://whyy.org/wp-content/uploads/2017/09/NPR@2x.png" alt="" title="NPR@2x" width="96" height="30" /></a> <a href="http://pbs.org" title="pbs" target="_blank"><img src="https://whyy.org/wp-content/uploads/2017/09/PBS@2x.png" alt="" title="PBS@2x" width="104" height="50" /></a> </div> </div> </div> </div>  </footer>  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'914e0fa1fba0fde8',t:'MTc0MDA0OTk0Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>