title: JavaScript Failing in IE9 Randomly / FORM Tag Containing DIV Closing Prematurely in IE9
body: <p>The general gist of the problem is that random commands seem to not work in IE9, or only work occasionally. Commands that work on other pages just fine.</p>
  
  <p>I've excluded some things I didn't need so now there are only two javascripts on the page. One is jQuery 2.0.3, and the other is the pages main action script:</p>
  
  <pre><code>$(function()
      {
      $("#lib").addClass("this_page");
  
      $(".output").each(convert_values);
  
      $("form .input_class").keyup(convert_values);
      $("form .input_class").change(convert_values);
      $(".swap").click(function($e)
          {
          var $form = $(this).closest("form");        
          var $input_value = $form.find(".input_units").val();
          var $output_value = $form.find(".output_units").val();
          $form.find(".input_units").val($output_value);
          $form.find(".output_units").val($input_value).change();
          $e.preventDefault();
          });
      });
  
  
  function convert_values()
      {
      var $form = $(this).parent();
      var $input = $form.find(".input").val();
      $form.find(".input").removeClass("input_error");
      var $input_units = $form.find(".input_units").val();
      var $output_units = $form.find(".output_units").val();
      var $result = 0;
  
      if ($input == "") { $input = "0"; }
  
      console.log("data-type='"+$form.attr("data-type")+"'");
      if ( $form.attr("data-type") == "temp" )
          {
          switch ( String($input_units) + String($output_units) )
              {
              case "fc":
                  $result = (Number($input) - 32) * (5/9); break;
              case "fk":
                  $result = ((Number($input) - 32) * (5/9)) + 273.15; break;
              case "cf":
                  $result = (Number($input) * 1.8) + 32; break;
              case "ck":
                  $result = Number($input) + 273.15; break;
              case "kc":
                  $result = Number($input) - 273.15; break;
              case "kf":
                  $result = ((Number($input) - 273.15) * 1.8) + 32; break;
              default:
                  $result = $input;
              }
          }
      else
          {
          console.log("("+$input+" / "+$output_units+") * "+$input_units);
          $result = (Number($input) / Number($output_units)) * Number($input_units);
          }
  
      if (isNaN($result))
          {
          //play_a_sound("snd_fail");
          $form.find(".input").addClass("input_error");
          $result = "Input Error";        
          }
  
      $form.find(".output").val($result);
      }
  </code></pre>
  
  <p>The results of this are very strange. My convert_values( ) function is called several times at page load, and it seems to work fine. But then when you call it by clicking on selects after page load, it doesn't work. </p>
  
  <p>More specifically, </p>
  
  <pre><code>var $input = $form.find(".input").val();
  var $input_units = $form.find(".input_units").val();
  var $output_units = $form.find(".output_units").val();
  </code></pre>
  
  <p>These three lines work several times just after the script loads. But later on in the script, $output_units is undefined when the function is called. This one function and event handler are used to process several different individual HTML forms, which is why there are no specific IDs, only classes and $(this) based identifiers. But why would 2 of those commands work, but not the third? Why would it work sometimes, but not the rest of the time.</p>
  
  <p>Also, potentially BEFORE that even happens, there's this check:</p>
  
  <p>if ( $form.attr("data-type") == "temp" )</p>
  
  <p>Most of the forms do not have this attribute. And processing goes normally. But halfway down the page, one form DOES have this attribute. But IE9 still returns "undefined" from this. IE9 DOES support HTML5 data- attributes, so theres no obvious reason why this isn't working. </p>
  
  <p>Based on what I am currently logging to the console, you can see when those first three values are working properly, and when one of them cuts out and does not work. And that same debug logging also shows you when IE9 misses the data-type="temp" attribute, because you end up with strings in your math, due to program flow not being redirected for this special case. </p>
  
  <p>So random, perfectly valid commands seem to be failing, for no reason. But the behavior is 100% repeatable. In this current state of things, I am getting no relevant errors in the JS console in IE9. It's like something in my code is causing IE9 to go haywire but I have no idea what it is.</p>
  
  <p>The web page in question is here:
  <a href="http://www.whatsmyip.org/lib/unit-converter/" rel="nofollow noreferrer">http://www.whatsmyip.org/lib/unit-converter/</a></p>
  
  <p>The javascript file for that page is here:
  <a href="http://www.whatsmyip.org/js/tools/lib/unit-converter.js" rel="nofollow noreferrer">http://www.whatsmyip.org/js/tools/lib/unit-converter.js</a></p>
  
  <p>Each converter on the page is it's own FORM tag, the "Temperature" form is the one with the data-type attribute that seems to be unreadable for IE9. After it fails to read that, it seems that THEN it also starts being unable to read $form.find(".output_units").val(); though it can read this fine before.</p>
  
  <p>As much as I hate all IE, I'm not ready to abandon IE9 yet. I have lots of scripts on almost every page on my site, but this is the only issue I'm having. All other pages work great. I do lots of beta testing in virtual machines. </p>