IE8 error when using dyanamic form actions

Question

Hello all:

Please go here to see an iframe based web app. Click on the map of Australia, choose a city, then buy some tickets. Now you will see the cart form located on the lower right corner. The problem is in IE8, I cannot delete checked rows from the table; whereas in other browsers such as FireFox3.6, Opera10, Safari4 and Chrome4, this action is all right.

Below is the related javascript. It doesn't use jQuery, as part of the requirement is no framework allowed! And iframes are the my best bet, ajax will simply kill me under this restriction.

/* cartForm.js */
function toDeleteRoutes() //this function is executed before form is to be submitted.
{
if(document.getElementsByClassName('delete_box').length > 0) //there're rows to delete
{
    document.getElementById('cartForm').action ="./deleteRoutes.php";
    document.getElementById('cartForm').target ="section4";

    return true; //this enables the form to be submitted as usual.
}
else return false; //there is no more row in table to delete!   
}

function toSendEmail() //this function is executed before form is to be submitted.
{
document.getElementById('cartForm').action ="./sendEmail.php";
document.getElementById('cartForm').target ="section3";

document.getElementById('delete_btn').disabled = true; //disable delete button now
return true; //this enables the form to be submitted as usual.
}

function toCancelPurchase()
{
document.getElementById('cartForm').action ="./cancelPurchase.php";
document.getElementById('cartForm').target ="section4";

return true; //this enables the form to be submitted as usual.
}

I don't know which part is wrong, or this is just because IE8 screws all?

Answer 1

You are using the document.getElementsByClassName method, and it is not available on IE.

You should include a custom function to have this functionality.

Personally I like a slightly modified version of the Dustin Diaz implementation:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available!
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
      if ( node == null )
        node = document;
      var classElements = [],
          els = node.getElementsByTagName("*"),
          elsLen = els.length,
          pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

      for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    })(classname, node);
  }
}

Check the following article, there are plenty implementations that you can use:

• getElementsByClassName Speed Comparison