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,59 @@
       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 initializeDonationForm()
   {
     formValues.name = getText("i18n_name");
+    document.getElementById('form-payment').addEventListener("click", onSelectPayment);

[Thomas Greiner, 2016/01/28 15:23:37]

Detail: Please use double quotes instead of single ones.

[juliandoucette, 2016/01/28 15:50:44]

Done.

+    document.getElementById("form-currency").addEventListener("click", updateCurrency);
+    document.getElementById("form").addEventListener("submit", onSubmitDonation);
+    updateCurrency();
+  }
 
-    document.getElementById("payment").addEventListener("click", function(event)
-    {
-      if (event.target.localName != "button")
-        return;
+  function onSelectPayment(event)
+  {
+    if (event.target.tagName != "BUTTON")
+      return;
+    event.preventDefault();
+    document.getElementById("form").className = (event.target || event.srcElement).className;

[Thomas Greiner, 2016/01/28 15:23:37]

According to https://github.com/WebReflection/ie8 there should be a polyfill
included for `event.target`.

[juliandoucette, 2016/01/28 15:50:44]

Done.

+    ensureMinPrice();
+  }
 
-      document.getElementById("form").className = event.target.className;
-      ensureMinPrice();
-    }, true);
+  function onSubmitDonation(event)
+  {
+    event.preventDefault();
+    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();
+  document.addEventListener("DOMContentLoaded", initializeDonationForm);

[Thomas Greiner, 2016/01/28 15:23:37]

Usually, we explicitly specify the last parameter in `Node.addEventListener()`,
`XMLHttpRequest.get()`, `XMLHttpRequest.send()`, `parseInt()` and such functions
to avoid unintended behavior.

Therefore I would strongly recommend to do that in this file as well since it
appears to be supported by the library you included.

[juliandoucette, 2016/01/28 15:50:44]

Done.

 
-    document.getElementById("donate").addEventListener("click", function(event)
-    {
-      var provider = providers[document.getElementById("form").className];
-      if (provider)
-        provider();
-    }, false);
-  }, false);
 })();
 
 // -->
@@ -464,16 +475,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 +551,4 @@
       </div>
     </div>
   </div>
-</div>
+</form>