Commit 9cc99794 authored by Aral Balkan's avatar Aral Balkan

Update initial configuration and button label on payment type change

parent 79973240
......@@ -140,6 +140,15 @@ label
background-color: #eee;
}
input[name="donationType"] {
display: none;
}
input[name="donationType"]:checked + label {
background-color: #FFC3A7;
color: #82073B;
}
/* only add right margin to first button
(creating central gutter) */
.donationTypeButtonLabel:nth-of-type(1)
......
......@@ -34,16 +34,17 @@
<fieldset>
<legend class='hidden'>Type of donation</legend>
<label class='donationTypeButtonLabel' for='oneTimeDonation'><input type='radio' name='donationType' value='oneTime' id='oneTimeDonation' checked> One time</label>
<label class='donationTypeButtonLabel' for='monthlyDonation'><input type='radio' name='donationType' value='monthly' id='monthlyDonation'> Monthly</label>
<input type='radio' name='donationType' value='monthly' id='monthlyDonation' checked>
<label class='donationTypeButtonLabel' for='monthlyDonation'>Monthly</label>
<input type='radio' name='donationType' value='oneTime' id='oneTimeDonation'>
<label class='donationTypeButtonLabel' for='oneTimeDonation'>One time</label>
</fieldset>
<fieldset>
<legend class='hidden'>Amount of donation</legend>
<input type='radio' name='donationAmount' value='5' class='hidden' id='tier1'><label class='donationTierButtonLabel' for='tier1'>€5</label>
<input type='radio' name='donationAmount' value='10' class='hidden' id='tier2'><label class='donationTierButtonLabel' for='tier2'>€10</label>
<input type='radio' name='donationAmount' value='10' class='hidden' id='tier2' checked><label class='donationTierButtonLabel' for='tier2'>€10</label>
<input type='radio' name='donationAmount' value='20' class='hidden' id='tier3'><label class='donationTierButtonLabel' for='tier3'>€20</label>
<input type='radio' name='donationAmount' value='25' class='hidden' id='tier4'><label class='donationTierButtonLabel' for='tier4'>€25</label>
<input type='radio' name='donationAmount' value='50' class='hidden' id='tier5'><label class='donationTierButtonLabel' for='tier5'>€50</label>
......@@ -53,7 +54,7 @@
<input type='radio' name='donationAmount' value='0' class='hidden' id='tier8'><label class='donationTierButtonLabel' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
</fieldset>
<button id='donateButton' disabled>Donate by credit/debit card</button>
<button id='donateButton'>Become a patron</button>
<small class='donation-currency'>Donations are in <a href='https://transferwise.com/gb/currency-converter/currencies/eur-euro'>Euros</a></small>
</div> <!-- end of donation form -->
......
......@@ -14,6 +14,21 @@ document.addEventListener('keypress', function(e){
}
})
// When the donation type changes, update the text on the button to reflect
// whether this is a donation or a patronship.
document.querySelectorAll('input[name="donationType"]').forEach(function(element){
element.addEventListener('change', function(e){
const donateButton = document.querySelector('#donateButton')
if (e.target.id === 'monthlyDonation') {
donateButton.innerHTML = 'Become a patron'
} else {
donateButton.innerHTML = 'Donate'
}
})
})
// When a valid custom donation amount value is entered, enable the donation button.
document.querySelectorAll('input[name="donationAmount"]').forEach(function(element){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment