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