Revision 82489 of "Template:2011FR/lp-form-GB-DDOptimised" on foundationwiki

<html>
<style type="text/css">
#amount-box td {
  white-space: nowrap;
}
</style>
<form id="wmh_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="[email protected]" />
<input type="hidden" name="item_name" value="Donation to Wikimedia UK" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="return" value="https://donate.wikimedia.org.uk/thanks-gift-aid" />
<input type="hidden" name="custom" value="" />
<input type="hidden" name="Payer_reference" value="" /> <!-- for Direct Debit -->

<p style="font-weight: bold;"></html>{{{gift-amount-text|Select your gift amount}}}<html></p>
<div id="amount-box" style="font-size: 100%; padding: 0; height: 5em;"> 

  <table id="oneoff-amount-table" style="display: none;" >
    <tr>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-0|5}}}<html>" />£</html>{{{donate-amount-0|5}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-1|10}}}<html>" />£</html>{{{donate-amount-1|10}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-2|20}}}<html>" />£</html>{{{donate-amount-2|20}}}<html></label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-3|50}}}<html>" />£</html>{{{donate-amount-3|50}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-4|100}}}<html>" />£</html>{{{donate-amount-4|100}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" value="</html>{{{donate-amount-5|200}}}<html>" />£</html>{{{donate-amount-5|200}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" value="" id="other_button" /></html>{{{donate-amount-other|Other}}}<html>: £</label>
        <input size="2" name="customAmount" id="other_amount" onfocus="this.form.other_button.checked=true;" onchange="this.form.other_button.value = this.form.other_amount.value" />
      </td>
    </tr>
  </table>

  <table id="dd-amount-table" style="width: 16em;">
    <tr>
      <td>
        <label><input type="radio" name="amount" id="dd-amount-0" value="</html>{{{dd-amount-0|2}}}<html>" />£</html>{{{dd-amount-0|2}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" id="dd-amount-1" value="</html>{{{dd-amount-1|3}}}<html>" />£</html>{{{dd-amount-1|3}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" id="dd-amount-2" value="</html>{{{dd-amount-2|5}}}<html>" />£</html>{{{dd-amount-2|5}}}<html></label>
      </td>
      <td>
        <label><input type="radio" name="amount" id="dd-amount-3" value="</html>{{{dd-amount-3|10}}}<html>" />£</html>{{{dd-amount-3|10}}}<html></label>
      </td>
    </tr>
    <tr>
      <td colspan="4">
        <label><input type="radio" name="amount" value="" id="dd_other_button" /></html>{{{donate-amount-other|Other}}}<html>: £</label>
        <input size="2" name="customAmount" id="dd_other_amount" onfocus="this.form.dd_other_button.checked=true;" onchange="this.form.dd_other_button.value = this.form.dd_other_amount.value" />
      </td>
    </tr>
  </table>

  <div id="dd-frequency" style="display: none;">
    </html>{{{frequency-label|Frequency:}}}<html>
    <input type="radio" value="M" name="frequency_type" id="frequency-type-M" checked="checked" />
    <label for="frequency-type-M"></html>{{{monthly-label|Monthly}}}<html></label>

    <input type="radio" value="Q" name="frequency_type" id="frequency-type-Q" />
    <label for="frequency-type-Q"></html>{{{quarterly-label|Quarterly}}}<html></label>
  </div>

</div>

<br />

<div id="buttons">
  <input type="button" id="paypal-donate-button" value="</html>{{{paypal-label|Donate by PayPal/Credit Card}}}<html>" style="margin: 0 auto;" onclick="submitForm('PayPal');" />
  <input type="button" id="dd-donate-button" value="</html>{{{dd-label|Donate by Direct Debit}}}<html>" style="margin: 0 auto;" onclick="submitForm('DirectDebit');" />
</div>

<div id="type-checkbox" class="donate-body-small">
  <!-- <input type="checkbox" name="dd-please" id="dd-please-checkbox" onchange="changeType()" /><label for="dd-please-checkbox"></html>{{{prefer-regular|I'd prefer to make a regular donation}}}<html></label><br /> -->
  <input type="checkbox" name="oneoff-please" id="oneoff-please-checkbox" onchange="changeType()" /><label for="oneoff-please-checkbox"></html>{{{prefer-oneoff|I'd prefer to make a one off donation}}}<html></label><br />
</div>

<div style="text-align:center">*&nbsp;&nbsp;*&nbsp;&nbsp;*</div>

<div class="donate-body-small">
  <input type="checkbox" name="email-opt" id="input_email" checked="checked" /><label for="input_email"></html>{{{email-option|I agree to receive occasional updates from <br/>Wikimedia UK.}}}<html></label>
  <br /><br /></html>
{{{privacy-policy-text|<html>Your personal data is subject to our <a href="http://uk.wikimedia.org/wiki/Donor_Privacy_Policy" target="_blank" >privacy policy</a>.</html>}}}<br />
{{{other-ways-text|<html>For more information on other ways to give, <a href="http://uk.wikimedia.org/wiki/Other_Ways_to_Give" target="_blank" >click here</a>.</html>}}}<html>
</div>

</form>

</html>

{{{chapter-text|}}}

<html>
<script type="text/javascript">
var wmh_paypal = document.getElementById('wmh_paypal');

function changeType() {
  if (document.getElementById('oneoff-please-checkbox').checked == false) {
      // DirectDebit mode
      //$('#donate-head').html('Make a regular donation');

      $('#oneoff-amount-table').hide();
      $('#dd-amount-table').show();
      
      $('#dd-frequency').show();
      
      $('#dd-donate-button').show();
      $('#paypal-donate-button').hide();
            
      wmh_paypal.action = 'https://donate.wikimedia.org.uk/dd/index.php';      
  } else {
      // Oneoff / PayPal mode
      $('#donate-head').html('</html>{{{donate-now-alt|Make your donation now}}}<html>');
      
      $('#oneoff-amount-table').show();
      $('#dd-amount-table').hide();
      
      $('#dd-frequency').hide();
      
      $('#dd-donate-button').hide();
      $('#paypal-donate-button').show();
      
      wmh_paypal.action = 'https://www.paypal.com/cgi-bin/webscr';
  }
  
  // Reset selected
  for ( var i = 0; i < wmh_paypal.amount.length; i++ ) {
    wmh_paypal.amount[i].checked = ""
  }
  
}

function validateForm(type) {
  // Validate
  var amount = null;
  for ( var i = 0; i < wmh_paypal.amount.length; i++ ) {
    if ( wmh_paypal.amount[i].checked ) {
      amount = wmh_paypal.amount[i].value;
    }
  }
  if (amount == null || amount < 1) {
      alert('</html>{{{validation-error-minimum|You must contribute at least £1}}}<html>'.replace('$1', '£1') );
      return false;
  } else if ( !( !(amount>250) || !(type=='DirectDebit') ) ) {
      alert('Sorry, you can not donate more than £250 by Direct Debit');
      return false;
  } else {
      return true;
  }

}

function submitForm(type) {  
  
  if ( validateForm(type) ) {
    var check_email = document.getElementById('input_email'); 
    wmh_paypal.custom.value = getQuerystring( 'utm_medium' ) + '.' + getQuerystring( 'utm_campaign' ) + '.' + getQuerystring( 'utm_source' ) + '.' + getLandingPage() + '.' + check_email.checked;
    
    if (type == 'DirectDebit') {
        wmh_paypal.Payer_reference.value = getQuerystring( 'utm_medium' ) + '.' + getQuerystring( 'utm_campaign' ) + '.' + getQuerystring( 'utm_source' ) + '.' + getLandingPage();
        wmh_paypal.action = 'https://donate.wikimedia.org.uk/dd/index.php';
    } else {
        wmh_paypal.action = 'https://www.paypal.com/cgi-bin/webscr';
    }
    
    wmh_paypal.submit();
  }
}

function getQuerystring( key ) {
  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 getLandingPage() {
  var path = "</html>{{{landing-page|default}}}<html>";

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

jQuery(document).ready( function( $ ) {
  changeType()
} );
</script>
</html><noinclude>
[[Category:Fundraising templates|{{PAGENAME}}]]
</noinclude>