JavaScript not working in IE8 / IE7 but fine in every other browser

Question

I am really new to javaScript so please bear with me. The code I have used is a mish mash of all sorts.

Basically what the script does is calculates a price based on how many pallets they choose and where they are shipping to and from and which zone it is (Four Zones per country)

FIDDLE

All this is working fine but when I comes to IE8 the script doesn't work and I cannot figure out why.

I do see an error when I load the console on IE8. The error is:

SCRIPT87: Invalid argument.
Line 437 character 7

which is this line of code

var fromCountry = document.querySelector('input[name="from_country"]:checked').value;

A working demo is located here - http://jsfiddle.net/barrycorrigan/f3wz6/

I think some of it is Pure JavaScript and some of it is jQuery. Does this matter? Could this be a problem?

Any help on making this code function better would be a great help.

Answer 1

As pointed out in the comments, querySelector isn't available in IE7. Since you're using jQuery, you should re-write it like:

  $('input[name="from_country"]:checked').val()

Behind the scenes, jQuery does a check to see if the browser supports the efficient querySelector method, and if it does, it uses it. Otherwise, it will fall back to using the broadly compatible Sizzle selector engine.