title: jQuery .val() returns null "eventually" in Chrome only
body: <p>UPDATE 2012/07/17:
  It's not just the "current_width" and "current_height" fields that get cleared - it's the entire form. Visually, the form in the browser still contains values, however jQuery "chokes", or something - and suddenly starts reading all fields in the form as null.</p>
  
  <p>It's not an issue with just .val(), because I've verified it by using .children() and .each() in the preview() function:</p>
  
  <pre><code>var debugstring = '';
  var debugform = $('#hidden_thumb_fields').children("input").each(function (){
      var child = $(this);
      debugstring += child.attr('id')+':'+child.val()+',';
  });
  
  console.log(debugstring);
  </code></pre>
  
  <p>As before, it works fine as you being to drag the selection area around, but soon afterwards it starts returning null.</p>
  
  <p>Reminder that this only happens in Chrome.</p>
  
  <hr>
  
  <p>ORIGINAL POST:
  (edit: removed the mlx log output)</p>
  
  <p>Scenario:</p>
  
  <ol>
  <li>Uploaded image width &amp; height are written into 2 form fields: current_width and current_height</li>
  <li>imgAreaSelect enabled on the uploaded image</li>
  <li>imgAreaSelect's onInit and onSelectChange call function "preview"</li>
  <li>"preview" reads the values of the width and height form fields using .val()</li>
  <li>As you move the selection area around, "preview" is called repeatedly</li>
  <li>Eventually, .val() starts returning NULL, even though the fields still visibly contain the correct values and have not been modified.  This only happens in Chrome.  Both Firefox and Safari work pleasantly.  IE has not been tested.</li>
  <li>If I use plain Javascript (document.getElementById().value), there is no problem whatsoever.</li>
  </ol>
  
  <p>As is often cited, I am calling imgAreaSelect after $(document).ready.  The only thing done before is the setting of 3 vars, which I've included in the preview sample below.</p>
  
  <p>On a side note, if there is a better or more acceptable way of getting the image width and height data, I'm all ears. The image upload script (PHP) is what sets these fields in the first place, and with my level of experience I'm not sure if there's a better way to do it. I want the real dimensions of the image, not the .css width and height, as they can be (and in my scenario, typically are) different.</p>
  
  <p>The specific bit of code where the problem seems to originate is right at the beginning of the preview function:</p>
  
  <pre><code>function preview(img, selection) { 
      var current_width = $('#thumbnail_form').find('#current_width').val();
      var current_height = $('#thumbnail_form').find('#current_height').val();
  </code></pre>
  
  <p>Here is preview().  If I remove .find() and just go directly with $('#current_width').val(), the problem persists:</p>
  
  <pre><code>var thumb_width=128;
  var thumb_height=128;
  var counter=1;
  
  function preview(img, selection) { 
      var current_width = $('#thumbnail_form').find('#current_width').val();
      var current_height = $('#thumbnail_form').find('#current_height').val();
  
      //var current_width = document.getElementById("current_width").value;
      //var current_height = document.getElementById("current_height").value;
  
      var scaleX = thumb_width / selection.width; 
      var scaleY = thumb_height / selection.height; 
  
      var img_css_width = Math.round(scaleX * current_width) + 'px';
      var img_css_height = Math.round(scaleY * current_height) + 'px';
      var img_css_margin_left = '-' + Math.round(scaleX * selection.x1) + 'px';
      var img_css_margin_top = '-' + Math.round(scaleY * selection.y1) + 'px';
  
      // mlx and the css fields are just to help diagnose the problem
      var mlx = document.getElementById('mlx').value;
      if (!current_width) {
          current_width = 'NULL';
      }
      if (!current_height) {
          current_height = 'NULL';
      }
      $('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");
      $('#img_css_width').val(img_css_width);
      $('#img_css_height').val(img_css_height);
      $('#img_css_margin_left').val(img_css_margin_left);
      $('#img_css_margin_top').val(img_css_margin_top);
  
      $('#displayed_icon_container').find('#displayed_icon').css({
      //$('#displayed_icon').css({
          width:  img_css_width,
          height: img_css_height,
          marginLeft: img_css_margin_left,
          marginTop: img_css_margin_top 
      });
      $('#x1').val(selection.x1);
      $('#y1').val(selection.y1);
      $('#x2').val(selection.x2);
      $('#y2').val(selection.y2);
      $('#w').val(selection.width);
      $('#h').val(selection.height);
  
      // if I re-write these values back to the form, I can circumvent the issue, but why is this necessary?      
      //$('#current_width').val(current_width);
      //$('#current_height').val(current_height);
      $('#sx').val(scaleX);
      $('#sy').val(scaleY);
      counter++;
  }
  </code></pre>
  
  <p>Here's the relevant fields of the HTML. I don't believe the rest of the file is relevant, but am happy to post more if requested.</p>
  
  <pre><code>&lt;div id='thumbnail_form'&gt;
  &lt;form name='form' action='' method='post'&gt;
  &lt;div id='hidden_thumb_fields'&gt;
  x1: &lt;input type='text' name='x1' value='' id='x1' /&gt;&lt;br /&gt;
  y1: &lt;input type='text' name='y1' value='' id='y1' /&gt;&lt;br /&gt;
  x2: &lt;input type='text' name='x2' value='' id='x2' /&gt;&lt;br /&gt;
  y2: &lt;input type='text' name='y2' value='' id='y2' /&gt;&lt;br /&gt;
  Selection Width (w): &lt;input type='text' name='w' value='' id='w' /&gt;&lt;br /&gt;
  Selection Height (h): &lt;input type='text' name='h' value='' id='h' /&gt;&lt;br /&gt;
  
  Old Icon Display URL: &lt;input type='text' name='old_icon_display_URL' value='/whatever/thing.png' id='old_icon_display_URL' /&gt;&lt;br /&gt;
  
  Large File Width (current_width): &lt;input type='text' name='current_width' value='' id='current_width' /&gt;&lt;br /&gt;
  Large File Height (current_height): &lt;input type='text' name='current_height' value='' id='current_height' /&gt;&lt;br /&gt;
  Img Display Width: &lt;input type='text' name='img_width' value='' id='img_width' /&gt;&lt;br /&gt;
  Img Display Height: &lt;input type='text' name='img_height' value='' id='img_height' /&gt;&lt;br /&gt;
  
  Img CSS Width: &lt;input type='text' name='img_css_width' value='' id='img_css_width' /&gt;&lt;br /&gt;
  Img CSS Height: &lt;input type='text' name='img_css_height' value='' id='img_css_height' /&gt;&lt;br /&gt;
  Img CSS Margin Left: &lt;input type='text' name='img_css_margin_left' value='' id='img_css_margin_left' /&gt;&lt;br /&gt;
  Img CSS Margin Top: &lt;input type='text' name='img_css_margin_top' value='' id='img_css_margin_top' /&gt;&lt;br /&gt;
  
  scalex: &lt;input type='text' name='sx' value='' id='sx' /&gt;&lt;br /&gt;
  scaley: &lt;input type='text' name='sy' value='' id='sy' /&gt;&lt;br /&gt;
  Math Log X: &lt;textarea name='mlx' value='' id='mlx' cols='40' rows='10'&gt;&lt;/textarea&gt;&lt;br /&gt;
  
  Icon Basedir: &lt;input type='text' name='icon_basedir' value='' id='icon_basedir' /&gt;&lt;br /&gt;
  Icon BaseURL: &lt;input type='text' name='icon_baseURL' value='' id='icon_baseURL' /&gt;&lt;br /&gt;
  Icon Relpath: &lt;input type='text' name='icon_relpath' value='' id='icon_relpath' /&gt;&lt;br /&gt;
  Large Filename: &lt;input type='text' name='large_image_filename' value='' id='large_image_filename' /&gt;&lt;br /&gt;
  Thumb Filename: &lt;input type='text' name='thumb_image_filename' value='' id='thumb_image_filename' /&gt;&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;input type='button' name='cancel_thumb' value='Cancel' id='cancel_thumb' /&gt;
  &lt;input type='submit' name='save_thumb' value='Crop Image' id='save_thumb' /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>