Template:2011FR/lp-form-singlecurrency-extrainfo



{ padding: 0.2em 0em; font-weight: normal; }
 * 1) donation-form

{ font-weight: bold; padding-bottom: 1em; }
 * 1) donation-form-title

{ font-size: 100%; padding: 0; }
 * 1) amount-box

{ font-style: italic; font-weight: bold; }
 * 1) amount_table_header

.div_amount_radio { white-space: nowrap; float: left; width: 4em; padding-right: 1px; }

.amount-label { width: 3em; }

select#input_currency_code { font-size:70%; width:8em; vertical-align: middle; }

{ border-color: #C0C0C0; border-style: solid; border-width: 1px; color: #999999; width: 3em; font-size: 0.9em; height: 0.9em; vertical-align: middle; }
 * 1) input_amount_other_box

div#card-info-block { font-size: 0.9em; display:table; }

.card-info-row { display:table-row; }

.card-input { border-color: #C0C0C0; border-style: solid; border-width: 1px; color: #999999; font-size: 0.9em; }

.card-input-title { font-size: 1em; padding-bottom: 3px; padding-right: 3px; display:table-row; width: 60px; }

.card-input-block { padding-bottom: 3px; display:table-row; }

{ width: 103px; }
 * 1) card_name_first

{ width: 103px; }
 * 1) card_name_last

{ width: 213px; }
 * 1) card_address_street_1

{ width: 112px; }
 * 1) card_address_city

{ width: 52px; vertical-align: middle; font-size: 90%; }
 * 1) card_address_state

{ width: 39px; }
 * 1) card_address_zip

{ width: 213px; }
 * 1) card_email

{ padding-top: 1em; padding-bottom: 1em; }
 * 1) donate-button-block

.donate-button-div { padding-bottom: 3px; }

.donate-button { width: 16em; }

{ text-align:center; }
 * 1) separator-div



//--- Utility Functions--- function arrayToObject(variable) //This is a helper function: converts an array to object literal with keys // then it can be used for quick "in" tests { var obj = {};

for (var i=0; i<variable.length; i++) {   obj[variable[i]]=''; }

return obj; }

function getQuerystring( key ) // This function to parse the information passed by central notice { key = key.replace( /[\[]/, '\\\[' ).replace( /[\]]/, '\\\]' ); var regex = new RegExp( '[\\?&]' + key + '=([a-zA-Z0-9\_\-]*)' ); var qs = regex.exec( window.location.search ); return qs == null ? '' : qs[1]; }

function getQuerystring2(key, default_) // This function to parse the information passed by central notice { if (default_==null) default_="";

key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"); var queryed = regex.exec(window.location.href);

if(queryed == null) return default_; else return queryed[1]; }

function getLandingPage //This function returns the path to the landing page. { var path = "  ";

if ( path == "default" ) {   pathArray = window.location.pathname.split( '/' ); return pathArray[2]; } else return path; }

//--Template Independent Arrays--- var country2currency = { } var currency2country = { }

var currencyPositions = { }; var euroPositions = { };

var currencySymbols = { }; var currencyMinimums = { };

var acceptedCC = arrayToObject([ ]); var acceptedPayPal = arrayToObject([ ]); var acceptedBankTransfer = arrayToObject([ ]);

var stateList = [ ];

// Calling Template Defined Arrays var currencyTypes = new Array ; var currencyDonationAmounts = { }; var currencyDisplay = new Array ;

//-Variables var countryCode = getQuerystring ('country'); if(countryCode == '') countryCode = 'US';

var languageCode = getQuerystring ('language'); if(languageCode == '') languageCode = 'en';

var currency = country2currency[countryCode]; if(typeof(currency) == 'undefined') {   currency = 'USD'; countryCode = 'US'; }

//- Body functions --- function updateButtons( currency ) //This function determines what buttons are displayed for each currency. { document.getElementById('cc-donate-button').style.display = "none"; document.getElementById('paypal-donate-button').style.display = "none"; document.getElementById('banktransfer-donate-button').style.display = "none"; if ( currency in acceptedCC ) {   //is this template still needed? document.getElementById('cc-donate-button').style.display = " "; } if (currency in acceptedPayPal ) {   //why not this? document.getElementById('paypal-donate-button').style.display = "block"; } if (currency in acceptedBankTransfer ) {   //or this? document.getElementById('banktransfer-donate-button').style.display = "block"; } }

function updateSymbol //This function displays the correct currency symbol based on currency selected and language { $('.amount-label-symbol').remove;

if (typeof(currencySymbols[currency]) == 'undefined') return;

if (currencyPositions[currency] == 'after') {   $('.amount-label').append(' ' + currencySymbols[currency] + ' '); } else if(currencyPositions[currency] == 'euro') {   if(euroPositions[languageCode] == 'before') {     $('.amount-label').prepend(' ' + currencySymbols[currency] + ' '); }   else {     $('.amount-label').append(' ' + currencySymbols[currency] + ' '); } }  else {   $('.amount-label').prepend(' ' + currencySymbols[currency] + ' '); } }

function updateValue //This function updates the asking amounts based on country and currency. { for(i=0; i<10; i++) {   if(typeof(currencyDonationAmounts[countryCode][i]) == 'undefined') {     break; }

if(currencyDisplay[i] != 0) {     document.getElementById("input_amount_" + i).value = currencyDonationAmounts[countryCode][i]; document.getElementById("input_amount_label_" + i).innerHTML = currencyDonationAmounts[countryCode][i]; } } }

function updateMenuChange(temp) //This function manages the updating when the drop down menu changes. { currency = temp; countryCode = currency2country[currency];

updateButtons(currency); updateValue; updateSymbol(currency); resetOtherBox; }

//--form junk function flagError(elem) { elem.style.borderColor = '#ff0000'; elem.style.color = '#ff0000'; }

function validateForm( form ) //This function checks the validity of the form. {

var error = false;

// Get amount selection var amount = null; for ( var i = 0; i < form.amount.length; i++ ) { if ( form.amount[i].checked ) { amount = form.amount[i].value; } }  if ( form.amountGiven.value != "") { var otherAmount = form.amountGiven.value; otherAmount = otherAmount.replace(/[,.](\d)$/, '\:$10'); otherAmount = otherAmount.replace(/[,.](\d)(\d)$/, '\:$1$2'); otherAmount = otherAmount.replace(/[,.]/g, ''); otherAmount = otherAmount.replace(/:/, '.'); form.amountGiven.value = otherAmount; amount = otherAmount; }

testElem = document.getElementById('card_name_first'); if(testElem.value == 'First') {   flagError(testElem); error = true; }

testElem = document.getElementById('card_name_last'); if(testElem.value == "Last") {   flagError(testElem); error = true; }

testElem = document.getElementById('card_address_street_1'); if(testElem.value == "Street") {   flagError(testElem); error = true; }

testElem = document.getElementById('card_address_city'); if(testElem.value == "City") {   flagError(testElem); error = true; }

testElem = document.getElementById('card_address_state'); if(testElem.value == "") {   flagError(testElem); error = true; }

testElem = document.getElementById('card_address_zip'); if(testElem.value == "Zip") {   flagError(testElem); error = true; }

testElem = document.getElementById('card_email'); if(testElem.value == "Email Address") {   flagError(testElem); error = true; }

if(error == true) {   alert('All fields must be filled in to process your donation.'); return false; }

error = true;

// Check amount is a real number error = ( amount == null || isNaN( amount ) || amount.value <= 0 ); // Check amount is at least the minimum if ( typeof( currencyMinimums[currency] ) == 'undefined' ) { currencyMinimums[currency] = 1; } if ( amount < currencyMinimums[currency] || error ) { alert( ' '.replace('$1', currencyMinimums[currency] + ' ' + currency ) ); error = true; } return !error; }

function DefaultSubmit(formfield, Action) //This function manages the submit action of the form. { var keycode; if (window.event) {   keycode = window.event.keyCode; } else if (Action) {   keycode = Action.which; } else return true;

if (keycode == 13) {   if (document.getElementById('cc-donate-button').style.display == "block") {     redirectPayment('cc'); }   else if (document.getElementById('paypal-donate-button').style.display == "block") {     redirectPayment('pp'); }   return false; } else return true; }

function redirectPayment(paymentType) //This function directs the payment to the proper method. { if (paymentType == 'cc') {   var paymentType = 'cc'; var action_url = "https://payments.wikimedia.org/index.php/Special:PayflowProGateway?uselang= \x26masthead=\x26form_name=\x26text_template=\x26language= " ; } if (paymentType == 'pp') {   action_url="http://wikimediafoundation.org/wiki/Special:ContributionTracking/  "; } document.paypalcontribution.action = action_url; document.paypalcontribution.utm_source.value = getQuerystring( 'utm_source' ) + '.' + getLandingPage + '.' + paymentType; if(validateForm(document.paypalcontribution)) {   document.paypalcontribution.fname.value = document.paypalcontribution.card_name_first.value; document.paypalcontribution.lname.value = document.paypalcontribution.card_name_last.value;

document.paypalcontribution.street.value = document.paypalcontribution.card_address_street_1.value; document.paypalcontribution.address1.value = document.paypalcontribution.card_address_street_1.value;

document.paypalcontribution.city.value = document.paypalcontribution.card_address_city.value; document.paypalcontribution.state.value = document.paypalcontribution.card_address_state.value;

//document.paypalcontribution.zip.value = document.paypalcontribution.card_address_zip.value; document.paypalcontribution.zip.value = document.paypalcontribution.card_address_zip.value;

document.paypalcontribution.email.value = document.paypalcontribution.card_email.value; document.paypalcontribution.emailAdd.value = document.paypalcontribution.card_email.value;

if(typeof(OWA) !== 'undefined') {     OWATracker.shareStateByPost( document.paypalcontribution ); }   document.paypalcontribution.submit; } }

         

 

 

<input type="hidden" name="city" value="" /> <input type="hidden" name="state" value="" /> <input type="hidden" name="zip" value="" /> <input type="hidden" name="country" id="country" value="" />

<input type="hidden" name="email" value="" /> <input type="hidden" name="emailAdd" value="" />

<script type="text/javascript" language="javascript">

for(i=0; i<10; i++) { if(typeof(currencyDonationAmounts[countryCode][i]) == 'undefined' ) {   break; } //This adds the radio options according to the flags passed to the template. if(currencyDisplay[i] != 0) {   document.getElementById("amount-box").innerHTML += "<div class='div_amount_radio' style='white-space:nowrap;'>" + "<input type='radio' class='input_amount_radio' name='amount' id='input_amount_" + i   + "' onclick='resetOtherBox;'" + "value='" + currencyDonationAmounts[countryCode][i] + "'/><label for='input_amount_" + i + "' class='amount-label' id='input_amount_label_" + i + "'> " + currencyDonationAmounts[countryCode][i] + " "; } }

<input type="radio" name="amount" id="input_amount_other" value="" /><label for="input_amount_other"> <input type="text" class="input-text" name="amountGiven" id="input_amount_other_box" onclick="this.value=''; clearOtherBox;" onfocus="this.form.input_amount_other.checked=true;" onKeyPress="return DefaultSubmit(this,event)" />

Name <input type="text" class="card-input" id="card_name_first" value="First" onfocus="clearThis(this,'First');" onblur="resetThis(this,'First');" /> <input type="text" class="card-input" id="card_name_last" value="Last" onfocus="clearThis(this,'Last');" onblur="resetThis(this,'Last');" /> Address <input type="text" class="card-input" id="card_address_street_1" value="Street" onfocus="clearThis(this,'Street');" onblur="resetThis(this,'Street');" /> <input type="text" class="card-input" id="card_address_city" value="City" onfocus="clearThis(this,'City');" onblur="resetThis(this,'City');" /> <select id="card_address_state" size="1" onclick="recolorThis(this);">

<script type="text/javascript"> var opt = document.createElement("option"); opt.selected = true; opt.text = ""; opt.value = ""; document.getElementById("card_address_state").options.add(opt);

for(i=0; i<stateList.length; i++) {         opt = document.createElement("option"); opt.text = stateList[i]; opt.value = stateList[i]; document.getElementById("card_address_state").options.add(opt); }

<input type="text" class="card-input" id="card_address_zip" value="Zip" onfocus="clearThis(this,'Zip');" onblur="resetThis(this,'Zip');" /> E-mail <input type="text" class="card-input" id="card_email" value="Email Address" onfocus="clearThis(this,'Email Address');" onblur="resetThis(this,'Email Address');" /> <input type="button" value=" " class="donate-button" onclick="redirectPayment('cc')"; /> <input type="button" value=" " class="donate-button" onclick="redirectPayment('pp');" /> <input type="button" value=" " class="donate-button" onclick="redirectPayment('bt');" />

    *  *  *

<script type="text/javascript">

function clearThis(elem,initialString) //This function empties the "Other" Box. { elem.style.color = "#000000"; elem.style.borderColor = '#C0C0C0'

if(elem.value == initialString) elem.value = ""; }

function resetThis(elem,resetString) { if(elem.value == "") {   elem.style.color = "#999999"; elem.value = resetString; } elem.style.borderColor = '#C0C0C0'; }

function recolorThis(elem) { elem.style.color = "#000000"; elem.style.borderColor = '#C0C0C0'; }

function resetOtherBox //This function resets the "Other" Box to the default values. { document.getElementsByName("amountGiven")[0].style.color = "#999999"; document.getElementsByName("amountGiven")[0].value = ""; }

function clearOtherBox //This function empties the "Other" Box. { document.getElementsByName("amountGiven")[0].style.color = "#000000"; document.getElementsByName("amountGiven")[0].value = ""; }

document.paypalcontribution.utm_medium.value = getQuerystring( 'utm_medium' ); document.paypalcontribution.utm_campaign.value = getQuerystring( 'utm_campaign' ); document.paypalcontribution.country.value = getQuerystring ( 'country' ); document.paypalcontribution.referrer.value = document.referrer;

( function( $ ) { $(document).ready(function{ updateButtons(currency); updateValue; updateSymbol(currency); resetOtherBox; }) } )( jQuery );