donation_form - Builder 2.0.0

@IF HEADING:
<h1>{{HEADING}}</h1>
@ENDIF

@IF SUBHEADING:
<h2>{{SUBHEADING}}</h2>
@ENDIF

@IF BLURB:
{{BLURB}}
@ENDIF

<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>

<div id="single_donations">
    <p id="total">&nbsp;</p>
    <div class="row dollar-handles">
@EACH SINGLE:
  @IF SINGLE:ACTIVE:
      <div class="dollar-box active">
  @ELSE
      <div class="dollar-box">
  @ENDIF
        <img width="85%" height="85%" class="img-thumbnail" src="{{SINGLE:IMAGE}}" class="attachment-donate-handle" alt="{{SINGLE:IMAGE-ALT}}">
        <input class="btnDonAmount" type="button" id="one" value="${{SINGLE:DOLLAR}}" data-value="{{SINGLE:DOLLAR}}">
        <p class="small">
          <strong>{{SINGLE:HEADING}}</strong>
          <br>{{SINGLE:TEXT}}
        </p>
      </div>
@ENDEACH
    </div>
  
    <div class="row donate-section">
      <h2>My choice of...</h2>
      <span class="dollar-sign">$</span>
      <input type="number" id="amount" value="{{SINGLE[+ACTIVE]:DOLLAR}}"><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>

<div id="monthly_donations">
    <p id="monthly_total">&nbsp;</p>
    <div class="row dollar-handles">
@EACH MONTHLY:
@IF MONTHLY:ACTIVE:
      <div class="dollar-box active">
@ELSE
      <div class="dollar-box">
@ENDIF
        <img width="85%" height="85%" class="img-thumbnail" src="{{MONTHLY:IMAGE}}" class="attachment-donate-handle" alt="{{MONTHLY:IMAGE-ALT}}">
        <input class="MonthlyDonAmount" type="button" id="one" value="${{MONTHLY:DOLLAR}}" data-value="{{MONTHLY:DOLLAR}}">
        <p class="small">
          <strong>{{MONTHLY:HEADING}}</strong>
          <br>{{MONTHLY:TEXT}}
        </p>
      </div>
@ENDEACH
    </div>
  
    <div class="row donate-section">
      <h2>My choice of...</h2>
      <span class="dollar-sign">$</span>
      <input type="number" id="monthly_amount" value="{{MONTHLY[+ACTIVE]:DOLLAR}}"><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>
   
</div>

var ShowMonthly = function () {
    $('.monthly_donations').addClass('selected').removeClass('greyed');
    $('.single_donations').removeClass('selected').addClass('greyed');
    $('#single_donations').hide();
    $('#monthly_donations').css('display','block');
  };

@IF SHOW-SINGLE:
  ShowSingle();
@ELSE
  ShowMonthly();
@ENDIF
  
  $('.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('&nbsp;'); //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-PAGE}}?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('&nbsp;'); //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-PAGE}}?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>