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_-_Major_Donors
Edit Definition
View Live
View Source
donation_form
Edit Template
Edit Style Template
<h1>Choose a donation amount</h1> <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="http://supporter.wilderness.org.au/image/donations/ptb-seals.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$47" data-value="47"> <p class="small"> <strong>Raise awareness</strong> <br>Raise awareness about the risks involved. </p> </div> <div class="dollar-box active"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-people.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$68" data-value="68"> <p class="small"> <strong>Spread the word</strong> <br>Fund community outreach in South Australia. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-drill.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$83" data-value="83"> <p class="small"> <strong>Media coverage</strong> <br>Support large-scale media campaigns. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-oil.jpg" class="attachment-donate-handle" alt=""> <input class="btnDonAmount" type="button" id="one" value="$110" data-value="110"> <p class="small"> <strong>Help fund research</strong> <br>Fund experts to research the impacts of drilling in the Bight. </p> </div> </div> <div class="row donate-section"> <h2>My choice of...</h2> <span class="dollar-sign">$</span> <input type="number" id="amount" value="68"><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="http://supporter.wilderness.org.au/image/donations/ptb-people.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$26" data-value="26"> <p class="small"> <strong>Community action</strong> <br>Fund our Community Organisers to support local communities in their fight. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-oil.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$34" data-value="34"> <p class="small"> <strong>Raising awareness globally</strong> <br>Fund a cutting edge campaign to raise awareness and engage supporters in Australia and overseas. </p> </div> <div class="dollar-box active"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-map.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$42" data-value="42"> <p class="small"> <strong>Research drilling plans</strong> <br>Fund analysis from global experts in oil drilling to challenge claims made by the oil corporations that their plan is sound. </p> </div> <div class="dollar-box"> <img width="85%" height="85%" class="img-thumbnail" src="http://supporter.wilderness.org.au/image/donations/ptb-cliff.jpg" class="attachment-donate-handle" alt=""> <input class="MonthlyDonAmount" type="button" id="one" value="$50" data-value="50"> <p class="small"> <strong>Pressurise policy makers</strong> <br>Influence Government decision-makers by raising public pressure. </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="42"><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 = ('/single-donation-landing-page-name?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 = ('/monthly-donation-landing-page-name?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_-_Major_Donors at Tue, 17 Sep 2024 04:48:23 +1000 -->