15 Bucks Campaign

15-bucks.html

<form class="give-form">
	<h3">I'm Giving</h3>
	<div class="select-wrapper">
		<select name="gift-quantity" class="giftQuantity">
			<option value="">Choose!</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
			<option value="4">Four</option>
			<option value="5">Five</option>
			<option value="6">Six</option>
			<option value="7">Seven</option>
			<option value="8">Eight</option>
			<option value="9">Nine</option>
			<option value="10">Ten</option>
			<option value="25">Twenty Five</option>
			<option value="50">Fifty</option>
			<option value="100">One Hundred</option>
			<option value="500">Five Hundred</option>
			<option value="1000">One Thousand</option>
			<option value="custom">Another Amount</option>
		</select>
	</div>
	<h3>$15 Gifts to the<br>Christmas Offering.</h3>
	<a href="//give.newspring.cc/?christmas=15" target="_blank" data-gift-link class="btn">Give $15 Now!</a>
</form>
<script type="text/javascript">
var btn, getNumberOfGifts, select, urlBase;

urlBase = "//give.newspring.cc/?christmas="

select = document.querySelectorAll('select[name="gift-quantity"]')[0];

btn = document.querySelectorAll('a[data-gift-link]')[0];

getNumberOfGifts = function() {
  var numberOfGifts, total;
  numberOfGifts = select.value;
  if (numberOfGifts !== 'custom') {
    total = Number(numberOfGifts) * 15;
    if (typeof total === "number") {
      btn.href = urlBase + total;
      return btn.innerHTML = "Give $" + total + " now!";
    }
  } else {
    btn.href = urlBase;
    return btn.innerHTML = "Click Here to Give!";
  }
};
// better browser support
if (select.addEventListener) {
  select.addEventListener("change", getNumberOfGifts, false);
} else if (select.attachEvent) {
  select.attachEvent("onchange", getNumberOfGifts);
} else {
  select.onchange = getNumberOfGifts;
}
</script>

15-bucks.js

var btn, getNumberOfGifts, select, urlBase;
urlBase = "//give.newspring.cc/?christmas="
select = document.querySelectorAll('select[name="gift-quantity"]')[0];
btn = document.querySelectorAll('a[data-gift-link]')[0];
getNumberOfGifts = function() {
  var numberOfGifts, total;
  numberOfGifts = select.value;
  if (numberOfGifts !== 'custom') {
    total = Number(numberOfGifts) * 15;
    if (typeof total === "number") {
      btn.href = urlBase + total;
      return btn.innerHTML = "Give $" + total + " now!";
    }
  } else {
    btn.href = urlBase;
    return btn.innerHTML = "Click Here to Give!";
  }
};
// better browser support
if (select.addEventListener) {
  select.addEventListener("change", getNumberOfGifts, false);
} else if (select.attachEvent) {
  select.attachEvent("onchange", getNumberOfGifts);
} else {
  select.onchange = getNumberOfGifts;
}

README.md

15 Bucks Campaign Markup and How to

If you only have access to edit the markup, choose the entire markup from the 15-bucks.html and include it on your page. If you can add in javascript directly (and it will render after the markup has rendered), include the 15-bucks.js code to make the button update.

You will need to change the give.newspring.cc url to the link of your giving service. Feel free to change any markup or the amount of each gift (instead of 15).