Template:2012FR/Form-section/Radiobuttons/Default: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
add tabindex="-1" to errors so they can be focused by js and announced by screenreaders |
|||
| (84 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
<html> |
<html> |
||
<input type="hidden" name="currency_code" value="</html>{{{currency|{{CurrencyCode|{{{country}}}}}}}}<html>"/> |
|||
<div id="radiobuttons-table-header"> |
|||
<style type="text/css"> |
|||
</html>{{int:donate_interface-amount-legend}} ({{{currency|{{CurrencyCode|{{{country}}}}}}}})<html> |
|||
#radiobuttons-table-header{ |
|||
font-weight: bold; |
|||
font-size: 1.3em; |
|||
float: </html>{{#ifeq:{{Template:Ltr-direction|{{{uselang}}}}}|rtl|right|left}}<html>; |
|||
} |
|||
#radiobuttons-table-body{ |
|||
margin-left: -5px; |
|||
padding-top: 2.3em; |
|||
} |
|||
#input_amount_other_box{ |
|||
/* color: #aaaaaa; */ |
|||
color: black; |
|||
font-size: 0.8em; |
|||
border:1px solid #c0c0c0; |
|||
direction: </html>{{Template:Ltr-direction|{{{uselang}}}}}<html>; |
|||
} |
|||
#amount-table{ |
|||
font-size: 1.2em; |
|||
/*width: 100%;*/ |
|||
} |
|||
.amount-table-cell{ |
|||
white-space: nowrap; |
|||
} |
|||
.currency-collapsible-container-contained{ |
|||
display: none; |
|||
background-color: #FFFFFF; |
|||
color: black; |
|||
} |
|||
#country-container{ |
|||
/*display: none;*/ |
|||
float: </html>{{#ifeq:{{Template:Ltr-direction|{{{uselang}}}}}|rtl|left|right}}<html>; |
|||
} |
|||
#country-container-trigger{ |
|||
font-size: 0.9em |
|||
} |
|||
#country-container-contained{ |
|||
} |
|||
#input_currency_code{ |
|||
width: 9em; |
|||
font-size: 0.95em; |
|||
} |
|||
a#currency-link{ |
|||
color: #0645ad; |
|||
} |
|||
a#currency-link:hover{ |
|||
color: #0645ad; |
|||
background-image: none !important; |
|||
padding-right: 0 !important; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
<script type="text/javascript"> |
|||
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>"; |
|||
box.value = "</html>{{int:donate_interface-other}}<html>"; |
|||
//box.style.color = "#aaaaaa"; |
|||
} |
|||
function selectAmount(){ |
|||
//document.getElementById("input_amount_other_box").value = "</html>{{int:donate_interface-other}}<html>"; |
|||
document.getElementById("input_amount_other_box").value = ""; |
|||
//document.getElementById("input_amount_other_box").style.color = "#aaaaaa"; |
|||
document.getElementsByName("amountGiven")[0].value=""; |
|||
} |
|||
function triggerClick(elem){ |
|||
$('#' + elem + '-container-contained').show(); |
|||
} |
|||
function loadCountry(){ |
|||
//alert(window.location); |
|||
//var newPage = window.location.value; |
|||
//newCountry = $("#currency-select").value; |
|||
//newPage.replace("</html>{{{country}}}<html>",newCountry); |
|||
//alert(newPage); |
|||
//window.location = newPage; |
|||
//return false; |
|||
} |
|||
var monthlyDonation = false; |
|||
//This line is needed to prevent errors from a if statement in the "form-section-processing" template |
|||
</script> |
|||
<input type="hidden" name="currency_code" value="</html>{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}<html>"/> |
|||
<div> |
|||
<div id="radiobuttons-table-header"> |
|||
</html>{{int:donate_interface-amount-legend}}<html>: <div style="display: inline;"></html>{{2011FR/core-currency-symbol|{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}}}<html></div> <div style="display: inline;"></html>({{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}})<html></div> |
|||
</div> |
|||
<div class="collapsible-container-trigger" id="country-container" style="display: none; cursor: pointer;" onclick="triggerClick('country');"> |
|||
<span style="font-weight: bold; font-size: 1.2em"></html>{{2011FR/core-currency-symbol|{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}}}<html></span><span style="font-size: 0.6em">(Change?)</span> |
|||
<br/> |
|||
<span class="currency-collapsible-container-contained" id="country-container-contained"> |
|||
<select id="currency-select" style="font-size: 0.5em;" onchange="loadCountry();"> |
|||
<option value="</hmtl>{{{country}}}<html>" selected></html>{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}<html> – </html>{{2011FR/core-currency-symbol|{{{currency{{2011FR/core-currency-code|{{{country}}}}}}}}}}<html></option> |
|||
</html>{{#tag:html|{{#ifeq:{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}|USD||<option value="USD">USD – $</option>}}}}<html> |
|||
</html>{{#tag:html|{{#ifeq:{{{currency|{{2011FR/core-currency-code|{{{country}}}}}}}}|EUR||<option value="EUR">EUR – €</option>}}}}<html> |
|||
</select> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div id="radiobuttons-table-body"> |
|||
<!-- <center> --> |
|||
<table id="amount-table"> |
|||
<tr> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_0" onclick="selectAmount();" value="</html>{{{donate-amount-0}}}<html>" /> |
|||
<label for="input_amount_0"></html>{{{donate-amount-0}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_1" onclick="selectAmount();" value="</html>{{{donate-amount-1}}}<html>" /> |
|||
<label for="input_amount_1"></html>{{{donate-amount-1}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_2" onclick="selectAmount();" value="</html>{{{donate-amount-2}}}<html>" /> |
|||
<label for="input_amount_2"></html>{{{donate-amount-2}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_3" onclick="selectAmount();" value="</html>{{{donate-amount-3}}}<html>" /> |
|||
<label for="input_amount_3"></html>{{{donate-amount-3}}}<html></label> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_4" onclick="selectAmount();" value="</html>{{{donate-amount-4}}}<html>" /> |
|||
<label for="input_amount_4"></html>{{{donate-amount-4}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_5" onclick="selectAmount();" value="</html>{{{donate-amount-5}}}<html>" /> |
|||
<label for="input_amount_5"></html>{{{donate-amount-5}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_6" onclick="selectAmount();" value="</html>{{{donate-amount-6}}}<html>" /> |
|||
<label for="input_amount_6"></html>{{{donate-amount-6}}}<html></label> |
|||
</td> |
|||
<td class="amount-table-cell"> |
|||
<input type="radio" name="amount" id="input_amount_other" value="Other" OnClick="document.getElementById('input_amount_other_box').focus();"/> |
|||
<label for="input_amount_other"></html>{{int:donate_interface-other}}<html></label> |
|||
<!-- <input type="text" id="input_amount_other_box" size="3" autocomplete="off" />--> |
|||
<!-- <input type="text" id="input_amount_other_box" size="3" autocomplete="off" value="</html>{{int:donate_interface-other}}<html>" onfocus="clearOther(this)"/> --> |
|||
<input type="text" id="input_amount_other_box" size="3" autocomplete="off" value="" onfocus="clearOther(this)"/> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<!-- </center> --> |
|||
</div> |
</div> |
||
<fieldset class="frequency-options"> |
|||
<legend class="sr-only"> |
|||
How often would you like to donate? |
|||
</legend> |
|||
<ul> |
|||
<li> |
|||
<input type="radio" name="frequency" id="frequency_onetime" value="onetime" onclick="donationForm.toggleMonthly(false);" checked> |
|||
<label class="frb-btn" for="frequency_onetime"></html>{{int:donate_interface-onetime-short}}<html></label> |
|||
</li> |
|||
<li> |
|||
<input type="radio" name="frequency" id="frequency_monthly" value="monthly" onclick="donationForm.toggleMonthly(true);"> |
|||
<label class="frb-btn" for="frequency_monthly"></html>{{int:donate_interface-monthly-short}}<html></label> |
|||
</li> |
|||
</ul> |
|||
</fieldset> |
|||
<fieldset class="amount-options"> |
|||
<legend class="sr-only"> |
|||
</html>{{int:donate_interface-amount-legend}} ({{{currency|{{CurrencyCode|{{{country}}}}}}}})<html> |
|||
</legend> |
|||
<ul> |
|||
<li class="radiobuttons-cell input_amount_0"> |
|||
<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> |
|||
<li class="radiobuttons-cell input_amount_1"> |
|||
<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> |
|||
<li class="radiobuttons-cell input_amount_2"> |
|||
<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> |
|||
<li class="radiobuttons-cell input_amount_3"> |
|||
<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> |
|||
</li> |
|||
<li class="radiobuttons-cell input_amount_4"> |
|||
<input type="radio" name="amount" id="input_amount_4" onclick="selectAmount();" value="</html>{{{donate-amount-4}}}<html>" /> |
|||
<label class="frb-btn" for="input_amount_4"></html>{{CurrencyFormat|{{{donate-amount-4}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label> |
|||
</li> |
|||
<li class="radiobuttons-cell input_amount_5"> |
|||
<input type="radio" name="amount" id="input_amount_5" onclick="selectAmount();" value="</html>{{{donate-amount-5}}}<html>" /> |
|||
<label class="frb-btn" for="input_amount_5"></html>{{CurrencyFormat|{{{donate-amount-5}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label> |
|||
</li> |
|||
<li class="radiobuttons-cell input_amount_6"> |
|||
<input type="radio" name="amount" id="input_amount_6" onclick="selectAmount();" value="</html>{{{donate-amount-6}}}<html>" /> |
|||
<label class="frb-btn" for="input_amount_6"></html>{{CurrencyFormat|{{{donate-amount-6}}}|{{{currency}}}|{{{country}}}|{{{language}}}}}<html></label> |
|||
</li> |
|||
<li class="radiobuttons-cell input_amount_other"> |
|||
<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"> |
|||
<span></html>{{int:donate_interface-other}}<html></span> |
|||
<input id="input_amount_other_box" type="text" inputmode="decimal" autocomplete="off" value="" tabindex="-1" class="noime" onfocus="selectOther();"> |
|||
</label> |
|||
</li> |
|||
</ul> |
|||
<!-- tabindex="-1" allows focus with js so errors can be announced --> |
|||
<div style="display: none;" tabindex="-1" class="lp-error lp-error-smallamount"> |
|||
</html>{{int:Donate_interface-smallamount-error}}<html> |
|||
</div> |
|||
<div style="display: none;" tabindex="-1" class="lp-error lp-error-bigamount"> |
|||
</html>{{int:Donate_interface-bigamount-error}}<html> |
|||
</div> |
|||
</fieldset> |
|||
</html> |
</html> |
||
Latest revision as of 19:16, 20 November 2024