Webform and Javascript

I thought I posted but I could not find the post.

I hava a php script that generates a 6 digit number. I used Javascript to fill a field created in Webform call "special_field". My test works just fine but I have hard time implement into Drupal 6. I put the php into webform-form-NID.tpl.php. Load the javascript in the theme .info file. View source indicated the javascript is loaded. I seems to me getElementbyId does not work. What did I do wrong? Please help. Thanks.

Here is the php:

// Read the current special number
$frhandle = fopen("jn.dat", 'r');
$fjn = fgets($frhandle);
fclose($frhandle);
// Increment the special number (form is iNNNNN)
$numpartstr = substr($fjn, -5); // get the integer part without the leading i
$numpartint = (int)$numpartstr; // convert the string to a number
$numpartint += 1;
$newnumpartstr = (string)$numpartint; // convert the new value back to a string
// Pad with leading zeroes if needed
if (strlen($newnumpartstr) < 5)
{
$padding = 5 - strlen($newnumpartstr);
for ($i=1; $i <= $padding; $i++)
{
$newnumpartstr = "0".$newnumpartstr;
}
}
$newfjn = "i".$newnumpartstr;
// Write new number to file jn.dat
$fwhandle = fopen("jn.dat", 'w');
fputs($fwhandle, $newfjn);
fclose($fwhandle);
// Send back to browser
echo $newfjn;

Here is the Javascript that is loaded in the theme .info:

function genJN()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("special_field").value = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getjn.php",true);
xmlhttp.send();
}

... and here is the simple test HTML file that works just fine:

Form