Template:2012FR/Form-section/Radiobuttons/5-buttons: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
update
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<input type="hidden" name="currency_code" value="</html>{{{currency|{{CurrencyCode|{{{country}}}}}}}}<html>"/>
<style>
#radiobuttons-table-header {
font-weight: bold;
font-size: 1.3em;
margin-bottom: 0.8em;
}

.frequency-options {
margin: 0 3px 0.4em 3px;
font-size: 1.2em;
}

#radiobuttons-table {
font-size: 1.2em;
}

.radiobuttons-cell {
white-space: nowrap;
}

#input_amount_other_box {
color: black;
font-size: 0.8em;
border:1px solid #c0c0c0;
direction: </html>{{Template:2012FR/Switch/Ltr-direction|{{{language}}}}}<html>;
}

</style>

<script>
function clearOther(box) {
document.getElementById("input_amount_other").checked = true;
box.value = "";
box.style.color = "#000000";
}

function resetOther(box) {
box.value = "</html>{{int:donate_interface-other}}<html>";
}

function selectAmount() {
document.getElementById("input_amount_other_box").value = "";
document.getElementsByName("amountGiven")[0].value="";
}

$(document).ready(function() {

$(".frequency-options label").click(function() {
$(".frequency-options label").removeClass("checked");
$(this).addClass("checked");
});

$(".radiobuttons-cell label").click(function() {
$(".radiobuttons-cell label").removeClass("checked");
$(this).addClass("checked");
});

$(".input_amount_other").click(function() {
$("#input_amount_other_box").focus();
});

// hide frequency options in India, where we can only handle one-time donations
if (document.paypalcontribution.country.value === 'IN') {
$("#frequency_onetime").attr('checked', true);
$(".frequency-options").hide();
$("#cancel-monthly").hide();
}
});
</script>

<input type="hidden" name="currency_code" value="</html>{{{currency|{{2012FR/Switch/Currency/Code|{{{country}}}}}}}}<html>"/>
<div>
<div>
<div id="radiobuttons-table-header">
<div id="radiobuttons-table-header">
Line 76: Line 6:
</div>
</div>
</div>
</div>
<fieldset class="amount-options">
<div id="radiobuttons-table-body">
<ul>
<table id="radiobuttons-table">
<li class="radiobuttons-cell input_amount_0">
<tr>
<input type="radio" name="amount" id="input_amount_0" onclick="selectAmount();" value="</html>{{{donate-amount-0}}}<html>" />
<td class="radiobuttons-cell">
<input type="radio" name="amount" id="input_amount_0" onclick="selectAmount();" value="</html>{{{donate-amount-0}}}<html>" />
<label class="frb-btn" for="input_amount_0"></html>{{CurrencyFormat|{{{donate-amount-0}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
</li>
<label for="input_amount_0"></html>{{2012FR/CurrencyFormat|{{{donate-amount-0}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
<li class="radiobuttons-cell input_amount_1">
</td>
<input type="radio" name="amount" id="input_amount_1" onclick="selectAmount();" value="</html>{{{donate-amount-1}}}<html>" />
<td class="radiobuttons-cell">
<input type="radio" name="amount" id="input_amount_1" onclick="selectAmount();" value="</html>{{{donate-amount-1}}}<html>" />
<label class="frb-btn" for="input_amount_1"></html>{{CurrencyFormat|{{{donate-amount-1}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
</li>
<label for="input_amount_1"></html>{{2012FR/CurrencyFormat|{{{donate-amount-1}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
<li class="radiobuttons-cell input_amount_2">
</td>
<input type="radio" name="amount" id="input_amount_2" onclick="selectAmount();" value="</html>{{{donate-amount-2}}}<html>" />
<td class="radiobuttons-cell">
<input type="radio" name="amount" id="input_amount_2" onclick="selectAmount();" value="</html>{{{donate-amount-2}}}<html>" />
<label class="frb-btn" for="input_amount_2"></html>{{CurrencyFormat|{{{donate-amount-2}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
</li>
<label for="input_amount_2"></html>{{2012FR/CurrencyFormat|{{{donate-amount-2}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
<li class="radiobuttons-cell input_amount_3">
</td>
<input type="radio" name="amount" id="input_amount_3" onclick="selectAmount();" value="</html>{{{donate-amount-3}}}<html>" />
<label class="frb-btn" for="input_amount_3"></html>{{CurrencyFormat|{{{donate-amount-3}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
</tr>
<tr>
</li>
<td class="radiobuttons-cell">
<li class="radiobuttons-cell input_amount_4">
<input type="radio" name="amount" id="input_amount_3" onclick="selectAmount();" value="</html>{{{donate-amount-3}}}<html>" />
<input type="radio" name="amount" id="input_amount_4" onclick="selectAmount();" value="</html>{{{donate-amount-4}}}<html>" />
<label for="input_amount_3"></html>{{2012FR/CurrencyFormat|{{{donate-amount-3}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
<label class="frb-btn" for="input_amount_4"></html>{{CurrencyFormat|{{{donate-amount-4}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
</td>
</li>
<td class="radiobuttons-cell">
<li class="radiobuttons-cell input_amount_other">
<input type="radio" name="amount" id="input_amount_4" onclick="selectAmount();" value="</html>{{{donate-amount-4}}}<html>" />
<input type="radio" name="amount" id="input_amount_other" value="Other" onclick="document.getElementById('input_amount_other_box').focus();">
<label class="frb-btn" for="input_amount_other">
<label for="input_amount_4"></html>{{2012FR/CurrencyFormat|{{{donate-amount-4}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label>
<span></html>{{int:donate_interface-other}}<html></span>
</td>
<input type="number" min="0" id="input_amount_other_box" size="3" autocomplete="off" value="" tabindex="-1" onfocus="selectOther();">
<td class="radiobuttons-cell input_amount_other">
</label>
<input type="radio" name="amount" id="input_amount_other" value="Other" onclick="document.getElementById('input_amount_other_box').focus();">
<label for="input_amount_other">
</li>
</ul>
<span></html>{{int:donate_interface-other}}<html></span>
<div style="display: none;" class="lp-error lp-error-smallamount"></html>{{int:Donate_interface-smallamount-error}}<html></div>
<input type="text" id="input_amount_other_box" size="3" autocomplete="off" value="" onfocus="clearOther(this);">
<div style="display: none;" class="lp-error lp-error-bigamount"></html>{{int:Donate_interface-bigamount-error}}<html></div>
</label>
</fieldset>
</td>
<style>
</tr>
.amount-options ul {
</table>
grid-template-columns: 1fr 1fr 1fr !important;
</div>
}
</style>
</html>
</html>

Latest revision as of 20:01, 29 April 2024

Donation amount: