jQuery .val() returns null "eventually" in Chrome only
===

Scenario:

1. Uploaded image width & height are written into 2 form fields: current_width and current_height
3. imgAreaSelect enabled on the uploaded image
4. imgAreaSelect's onInit and onSelectChange call function "preview"
5. "preview" reads the values of the width and height form fields using .val()
6. As you move the selection area around, "preview" is called repeatedly
7. 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.
8. If I use plain Javascript (document.getElementById().value), there is no problem whatsoever.

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.

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.

Here is preview().  If I remove .find() and just go directly with $('#current_width').val(), the problem persists:

    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++;
    }

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.

    <div id='thumbnail_form'>
    <form name='form' action='' method='post'>
    <div id='hidden_thumb_fields'>
    x1: <input type='text' name='x1' value='' id='x1' /><br />
    y1: <input type='text' name='y1' value='' id='y1' /><br />
    x2: <input type='text' name='x2' value='' id='x2' /><br />
    y2: <input type='text' name='y2' value='' id='y2' /><br />
    Selection Width (w): <input type='text' name='w' value='' id='w' /><br />
    Selection Height (h): <input type='text' name='h' value='' id='h' /><br />
    
    Old Icon Display URL: <input type='text' name='old_icon_display_URL' value='/whatever/thing.png' id='old_icon_display_URL' /><br />
    
    Large File Width (current_width): <input type='text' name='current_width' value='' id='current_width' /><br />
    Large File Height (current_height): <input type='text' name='current_height' value='' id='current_height' /><br />
    Img Display Width: <input type='text' name='img_width' value='' id='img_width' /><br />
    Img Display Height: <input type='text' name='img_height' value='' id='img_height' /><br />
    
    Img CSS Width: <input type='text' name='img_css_width' value='' id='img_css_width' /><br />
    Img CSS Height: <input type='text' name='img_css_height' value='' id='img_css_height' /><br />
    Img CSS Margin Left: <input type='text' name='img_css_margin_left' value='' id='img_css_margin_left' /><br />
    Img CSS Margin Top: <input type='text' name='img_css_margin_top' value='' id='img_css_margin_top' /><br />
    
    scalex: <input type='text' name='sx' value='' id='sx' /><br />
    scaley: <input type='text' name='sy' value='' id='sy' /><br />
    Math Log X: <textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />
    
    Icon Basedir: <input type='text' name='icon_basedir' value='' id='icon_basedir' /><br />
    Icon BaseURL: <input type='text' name='icon_baseURL' value='' id='icon_baseURL' /><br />
    Icon Relpath: <input type='text' name='icon_relpath' value='' id='icon_relpath' /><br />
    Large Filename: <input type='text' name='large_image_filename' value='' id='large_image_filename' /><br />
    Thumb Filename: <input type='text' name='thumb_image_filename' value='' id='thumb_image_filename' /><br />
    </div>
    
    <input type='button' name='cancel_thumb' value='Cancel' id='cancel_thumb' />
    <input type='submit' name='save_thumb' value='Crop Image' id='save_thumb' />
    </form>
    </div>

And lastly, here's a sample of the MLX log. Note that both current_width and current_height start returning NULL at the same time:


    1)w:500,h:334
    2)w:500,h:334
    3)w:500,h:334
    4)w:500,h:334
    5)w:500,h:334
    6)w:500,h:334
    7)w:500,h:334
    8)w:500,h:334
    9)w:500,h:334
    10)w:500,h:334
    11)w:500,h:334
    12)w:500,h:334
    13)w:500,h:334
    14)w:500,h:334
    15)w:500,h:334
    16)w:500,h:334
    17)w:500,h:334
    18)w:500,h:334
    19)w:500,h:334
    20)w:500,h:334
    21)w:500,h:334
    22)w:500,h:334
    23)w:500,h:334
    24)w:500,h:334
    25)w:500,h:334
    26)w:500,h:334
    27)w:NULL,h:NULL
    28)w:NULL,h:NULL
    29)w:NULL,h:NULL
    30)w:NULL,h:NULL
    31)w:NULL,h:NULL
    32)w:NULL,h:NULL
    33)w:NULL,h:NULL
    34)w:NULL,h:NULL
    35)w:NULL,h:NULL
    36)w:NULL,h:NULL
    37)w:NULL,h:NULL
    38)w:NULL,h:NULL
    39)w:NULL,h:NULL
    40)w:NULL,h:NULL
    41)w:NULL,h:NULL
    42)w:NULL,h:NULL
    43)w:NULL,h:NULL
    44)w:NULL,h:NULL
