PayPal Donation 2
HTML
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="[email protected]">
<label>
<input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
<label>
<input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
<label>
<input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
<label>
<input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
<br>
<strong>Other Amount</strong>
<br> €
<input type="number" class="textBox" name="amount">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br />
<br />
<input type="submit" value="Pay with PayPal!">
</form>
CSS
body {
font-family: sans-serif;
box-sizing: border-box;
padding: 50px;
}
label {
margin: 5px;
float: left;
background: #ccc;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 15px;
display: block;
}
label input {
position: absolute;
visibility: hidden;
}
input:checked + span {
background-color: black;
color: #fff;
}
JavaScript
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
});
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});