Donate

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

Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
Cbarr (talk | contribs)
inactive
13,762 edits
Clean up unused code.
add tabindex="-1" to errors so they can be focused by js and announced by screenreaders
 
(80 intermediate revisions by 3 users not shown)
Line 1:
<html>
<input type="hidden" name="currency_code" value="</html>{{{currency|{{CurrencyCode|{{{country}}}}}}}}<html>"/>
<style type="text/css">
#<div id="radiobuttons-table-header{">
</html>{{int:donate_interface-amount-legend}} ({{{currency|{{CurrencyCode|{{{country}}}}}}}})<html>
font-weight: bold;
font-size: 1.3em;
float: </html>{{#ifeq:{{Template:2012FR/Switch/Ltr-direction|{{{uselang}}}}}|rtl|right|left}}<html>;
}
 
#radiobuttons-table-body{
margin-left: -5px;
padding-top: 2.3em;
}
 
#radiobuttons-table{
font-size: 1.2em;
/*width: 100%;*/
}
 
.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|{{{uselang}}}}}<html>;
}
 
#input_currency_code{
width: 9em;
font-size: 0.95em;
}
</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>";
}
 
function selectAmount(){
document.getElementById("input_amount_other_box").value = "";
document.getElementsByName("amountGiven")[0].value="";
}
 
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|{{2012FR/core-currency-code|{{{country}}}}}}}}<html>"/>
<div>
<div id="radiobuttons-table-header">
</html>{{int:donate_interface-amount-legend}}<html>: <div style="display: inline;"></html>{{2012FR/core-currency-symbol|{{{currency|{{2012FR/core-currency-code|{{{country}}}}}}}}}}<html></div> <div style="display: inline;"></html>({{{currency|{{2012FR/core-currency-code|{{{country}}}}}}}})<html></div>
</div>
</div>
<div id="radiobuttons-table-body">
<!-- <center> -->
<table id="radiobuttons-table">
<tr>
<td class="radiobuttons-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="radiobuttons-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="radiobuttons-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="radiobuttons-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="radiobuttons-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="radiobuttons-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="radiobuttons-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="radiobuttons-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" value="" onfocus="clearOther(this)"/>
</td>
</tr>
</table>
<!-- </center> -->
</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>
Retrieved from "https://donate.wikimedia.org/wiki/Template:2012FR/Form-section/Radiobuttons/Default"