Issue 219 - Donation page is broken in IE8

pages/donate.html

Index: pages/donate.html
===================================================================
--- a/pages/donate.html
+++ b/pages/donate.html
@@ -221,14 +221,14 @@
   var currencyValue = {
     get: function()
     {
-      return document.querySelector("input[name=currency]:checked").value;
+      return getCheckedCheckbox(document.querySelectorAll("input[name=currency]")).value;
     }
   };
 
   var priceValue = {
     get: function()
     {
-      var value = document.querySelector("input[name=price]:checked").value;
+      var value = getCheckedCheckbox(document.querySelectorAll("input[name=price]")).value;
       if (value == 0)
         value = document.getElementById("price-other").value >> 0;
       return value;
@@ -239,7 +239,7 @@
     },
     verify: function()
     {
-      var selected = document.querySelector("input[name=price]:checked");
+      var selected = getCheckedCheckbox(document.querySelectorAll("input[name=price]"));
       if (!selected)
         return "Please select an amount";
       if (this.get() < this.min())
@@ -391,9 +391,10 @@
     }
 
     // To submit a form in Firefox it needs to be part of the DOM
-    document.head.appendChild(form);
+    var documentHead = document.getElementsByTagName("head")[0]
+    documentHead.appendChild(form);
     form.submit();
-    document.head.removeChild(form);
+    documentHead.removeChild(form);
   }
 
   function getText(id)
@@ -413,49 +414,80 @@
       priceOther.value = minPrice;
   }
 
+  function getCheckedCheckbox(checkboxes)
+  {
+    var checkboxLength = checkboxes.length;
+    while (checkboxLength--)
+    {
+      if (checkboxes[checkboxLength].checked)
+        return checkboxes[checkboxLength];
+    }
+  }
+
   function updateCurrency()
   {
-    var checkbox = document.querySelector("input[name=currency]:checked");
-    if (!checkbox)
+    var currencyField = document.getElementById("form-currency");
+    var selectedCurrency = getCheckedCheckbox(
+      currencyField.querySelectorAll("input[name=currency]")
+    );
+    if (!selectedCurrency)
       return;
-
-    var currencyLabel = checkbox.parentNode[textAttr];
-    if (!currencyLabel)
-      return;
-
-    var elements = document.getElementsByClassName("currency-label");
-    for (var i = 0; i < elements.length; i++)
-      elements[i][textAttr] = currencyLabel;
+    var currencyLabel = selectedCurrency.parentNode[textAttr];
+    var currencyLabels = document.querySelectorAll(".currency-label");
+    for (var i = 0; i < currencyLabels.length; i++)
+      currencyLabels[i][textAttr] = currencyLabel;
     ensureMinPrice();
   }
 
-  document.addEventListener("DOMContentLoaded", function()
+  function addEventListenersBySelector(query, event, callback)
+  {
+    query = document.querySelectorAll(query);
+    var queryIndex = query.length;
+     //fallback to attachEvent for IE8
+    var addListenerFunction = typeof document.addEventListener == "function" ?
+      "addEventListener" :
+      "attachEvent";
+    if (addListenerFunction == "attachEvent")
+      event = "on" + event;
+    while (queryIndex--)
+      query[queryIndex][addListenerFunction](event, callback, false);
+  }
+
+  function initializeDonationForm()
   {
     formValues.name = getText("i18n_name");
+    addEventListenersBySelector("button[name='payment']", "click", onSelectPayment);
+    addEventListenersBySelector("input[name='currency']", "click", updateCurrency);
+    addEventListenersBySelector("#form", "submit", onSubmitDonation);
+    updateCurrency();
+  }
 
-    document.getElementById("payment").addEventListener("click", function(event)
-    {
-      if (event.target.localName != "button")
-        return;
+  function onSelectPayment(event)
+  {
+    if(event.preventDefault)

[Thomas Greiner, 2016/01/27 17:20:31]

Detail: Missing whitespace after `if`.

[juliandoucette, 2016/01/28 14:02:53]

Done.

+      event.preventDefault();
+    else
+      event.returnValue = false;
+    document.getElementById("form").className = (event.target || event.srcElement).className;
+    ensureMinPrice();
+  }
 
-      document.getElementById("form").className = event.target.className;
-      ensureMinPrice();
-    }, true);
+  function onSubmitDonation(event)
+  {
+    if(event.preventDefault)
+      event.preventDefault();
+    else
+      event.returnValue = false;
+    var provider = providers[document.getElementById("form").className];
+    if (provider)
+      provider();
+  }
 
-    document.getElementById("form-currency").addEventListener("click", function(event)
-    {
-      if (event.target.localName == "input")
-        updateCurrency();
-    }, true);
-    updateCurrency();
+  if (document.addEventListener)
+    document.addEventListener("DOMContentLoaded", initializeDonationForm);
+  else
+    document.attachEvent("onreadystatechange", initializeDonationForm);
 
-    document.getElementById("donate").addEventListener("click", function(event)
-    {
-      var provider = providers[document.getElementById("form").className];
-      if (provider)
-        provider();
-    }, false);
-  }, false);
 })();
 
 // -->
@@ -464,16 +496,16 @@
 <span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span>
 
 <p>
-  {{s2 Adblock Plus is - and will always be - free. Our mission is to provide users with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements. 
+  {{s2 Adblock Plus is - and will always be - free. Our mission is to provide users with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements.
   Your donation directly helps the development of Adblock Plus.}}
 </p>
 
-<div class="paypal" id="form">
-  <p id="payment">
+<form class="paypal" id="form">
+  <p id="form-payment">
     <strong>{{s3 Select your payment method}}</strong>
 
-    <button class="paypal">{{s4 PayPal}}</button>
-    <button class="credit-card">{{s5 Credit Card}}</button>
+    <button class="paypal" value="paypal" name="payment">{{s4 PayPal}}</button>
+    <button class="credit-card" value="credit-card" name="payment">{{s5 Credit Card}}</button>
   </p>
 
   <div id="form-fields">
@@ -540,4 +572,4 @@
       </div>
     </div>
   </div>
-</div>
+</form>