dynamically resizing html input elements with JS

[jamyk]

I wrote a function that automatically resizes HTML elements based on the width of the string value. It uses AJAX to run a PHP script that returns the string's width based on the string, font, and size. It ran perfectly, but when I ported it to a different page, it stopped working. It isn't throwing any errors, and the really weird part is that when I run it in IE8 (normally I run Chrome), it works like a charm. Any ideas?The call:\[code\]<input type="text" name="pt_f_name" onkeyup="widen_field('pt_f_name', 'Chalkboard', 12)">\[/code\]Javascript function:\[code\]function widen_field(field_name, field_font, font_size){ var field_value = http://stackoverflow.com/questions/12759436/document.getElementsByName(field_name)[0].value; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } var URL = "string_width.php?str=" + encodeURIComponent(field_value) + "&f=" + field_font + "&sz=" + font_size; xmlhttp.open("POST",URL,false); xmlhttp.send(); json_response = JSON.parse(xmlhttp.responseText); var string_width = json_response.str_width; var input_width = document.getElementsByName(field_name)[0].offsetWidth; if((string_width + 20) != input_width){ document.getElementsByName(field_name)[0].style.width = string_width + 20; }}\[/code\]PHP string width script:\[code\]$size = $_GET['sz'];$string = urldecode($_GET['str']);$font_url = "/font.ttf";$box = imageftbbox($size, 0, $font_url, $string);$values = array();$values['str_width'] = $box[2] - $box[0];echo json_encode($values);\[/code\]Any help is much appreciated.