Home
Build
Templates
bare_edm
content
crm
crm_splash
crm_wide
donation_form
edm
edmnew
edm_header
edm_head_no_social
edm_no_social
emeraldlink
first_chat
footer
footer_no_social
keith_donation_form
privacy_boilerplate
small_print
stylesheet
tax_body
tax_header
tax_receipt
testthing
view_on_site
wildchat
wildchat_header
wildnews
wildnews_header
Macros
crm
edm
DON_-_Wild_Chat
Edit Definition
View Live
View Source
donation_form
Edit Template
Edit Style Template
<h1>Choose a donation amount</h1> <p> Please select one of the following: </p> <div class="donate-options-container"> <div class="row donate-buttons-row"> <div class="btn-group btn-group-lg" role="group"> <button type="button" class="single_donations greyed btn btn-default" value="Single Donation"> Single Donation </button> <button type="button" class="monthly_donations btn btn-default" value="Monthly Donation"> Monthly Donation </button> </div> </div> <!-- SINGLE DONATION OPTIONS --> <div id="single_donations"> <p id="total"> </p> <div class="row dollar-handles"> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/1.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$65" data-value="65"> <p class="small"> <strong>Save the Fairy Possum</strong> <br>Protect the Fairy (Leadbeater's) Possum and other Australian threatened species from extinction. </p> </div> <div class="dollar-box active"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/2.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$100" data-value="100"> <p class="small"> <strong>Keep forests fabulous</strong> <br>Help keep destructive logging out of our native forests. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/3.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$460" data-value="460"> <p class="small"> <strong>Protect local communities</strong> <br>Stand with local communities around Australia to stop dangerous fracking. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/4.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$1000" data-value="1000"> <p class="small"> <strong>Protect whales from oil spills</strong> <br>Stop Big Oil from drilling for oil in a whale sanctuary off our southern coastline. </p> </div> </div> <div class="row donate-section"> <h2>My choice of...</h2> <span class="dollar-sign">$</span> <input type="number" id="amount" value="100"><span class="donate-currency">AUD</span> <div class="row"> <input type="button" id="single_donate_now" class="sendButton btn btn-xl" value="Donate Now" name="amt"><br> </div> </div> </div> <!-- END SINGLE DONATION OPTIONS --> <!-- MONTHLY DONATION OPTIONS --> <div id="monthly_donations"> <p id="monthly_total"> </p> <div class="row dollar-handles"> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/1.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$35" data-value="35"> <p class="small"> <strong>Save the Fairy Possum</strong> <br>Protect the Fairy (Leadbeater's) Possum and other Australian threatened species from extinction. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/2.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$55" data-value="55"> <p class="small"> <strong>Keep forests fabulous</strong> <br>Help keep destructive logging out of our native forests. </p> </div> <div class="dollar-box active"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/3.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$85" data-value="85"> <p class="small"> <strong>Protect local communities</strong> <br>Stand with local communities around Australia to stop dangerous fracking. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="https://supporter.wilderness.org.au/image/donations/4.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$125" data-value="125"> <p class="small"> <strong>Protect whales from oil spills</strong> <br>Stop Big Oil from drilling for oil in a whale sanctuary off our southern coastline. </p> </div> </div> <div class="row donate-section"> <h2>My choice of...</h2> <span class="dollar-sign">$</span> <input type="number" id="monthly_amount" value="85"><span class="donate-currency">AUD</span> <div class="row"> <input type="button" id="monthly_donate_now" class="sendButton btn btn-xl" value="Donate Monthly" name="amt"><br> </div> </div> </div> <!-- END MONTHLY DONATION OPTIONS --> </div> <!-- END DONATION OPTIONS CONTAINER --> <script type="text/javascript"> var ShowSingle = function () { $('.single_donations').addClass('selected').removeClass('greyed'); $('.monthly_donations').removeClass('selected').addClass('greyed'); $('#monthly_donations').hide(); $('#single_donations').css('display','block'); }; var ShowMonthly = function () { $('.monthly_donations').addClass('selected').removeClass('greyed'); $('.single_donations').removeClass('selected').addClass('greyed'); $('#single_donations').hide(); $('#monthly_donations').css('display','block'); }; ShowMonthly(); $('.single_donations').click(ShowSingle); $('.monthly_donations').click(ShowMonthly); // Some colour style for the amount input field $("#amount").css('color','#333'); //added a class to each button so you can select each, and added a data-value attribute that contains the number to put in the field $('.btnDonAmount').click(function(){ var amount = $(this).attr('data-value'); var amountText = $(this).attr('value'); $('#amount').val(amount).trigger('change'); $('#total').text('Single Donation Amount: ' + amountText); }); // disables the button if nothing is in the input field //$('.sendButton').attr('disabled',true); $('#amount').on('change keyup keydown',function(){ //removing spaces and trimming it to make sure someone doesn't have a space or something - you could probably also limit entry to this field to only numbers using another function (google it if you think it's worth doing) if( $(this).val().trim().replace(" ","").length !=0 ){ $('.sendButton').attr('disabled', false); } else { $('.sendButton').attr('disabled', true); $('#total').html(' '); //remove that line at the top if no value selected } }); //Go to URL function for sendButton_SingleDonation $('#single_donate_now').click(function() { window.location.href = ('/donation-pages/donate-now-wctas?amt=' + $('#amount').val()); }); </script> <script type="text/javascript"> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// THIS IS FOR MONTHLY DONATIONS ///////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Some colour style for the amount input field $("#monthly_amount").css('color','#333'); //added a class to each button so you can select each, and added a data-value attribute that contains the number to put in the field $('.MonthlyDonAmount').click(function(){ var amount = $(this).attr('data-value'); var amountText = $(this).attr('value'); $('#monthly_amount').val(amount).trigger('change'); $('#monthly_total').text('Monthly Donation Amount: ' + amountText); }); // disables the button if nothing is in the input field //$('.sendButton_monthly').attr('disabled',true); $('#monthly_amount').on('change keyup keydown',function(){ //removing spaces and trimming it to make sure someone doesn't have a space or something - you could probably also limit entry to this field to only numbers using another function (google it if you think it's worth doing) if( $(this).val().trim().replace(" ","").length !=0 ){ $('.sendButton_monthly').attr('disabled', false); } else { $('.sendButton_monthly').attr('disabled', true); $('#total').html(' '); //remove that line at the top if no value selected } }); //Go to URL function for sendButton_SingleDonation $('#monthly_donate_now').click(function() { window.location.href = ('/donation-pages/donate-monthly-wctas?amt=' + $('#monthly_amount').val()); }); //THIS IS FOR BOTH SINGLE AND MONTHLY //MAKES THE IMAGE CLICKABLE $('.img-thumbnail').click(function(){ $(this).next().click(); }); //REMOVES AND ADDS CLASS OF ACTIVE AFTER CLICK $(".btnDonAmount, .MonthlyDonAmount").click(function(){ $(".btnDonAmount, .MonthlyDonAmount").parent().removeClass('active'); //remove all active states $(this).parent().addClass('active'); //add active to last clicked button }); </script> <!-- Builder 2.0.0: DON_-_Wild_Chat at Tue, 17 Sep 2024 06:00:33 +1000 -->