image is not displayed

[PerHaPs]

Hi,
This javascript inside a PHP script was working until I changed some little thing. Now after browsing for an image file a thumbnail box with the right dimensions appears but there's no thumbnail.
The file is still "there" somehow, because it sends the file name correctly to the rest of the PHP script.

[code]
echo "<script>
function view_img(img_name){
document[img_name].src = upForm.img_file.value;
document[img_name].width = 100;
}
</script>
<br>
<table align=\"left\" bordercolor=\"fuchsia\" border=\"1\" style=\"margin-left:50px;\" cellspacing=\"0\">
<tr>
<td valign=\"top\" align=\"center\" style=\"padding-top:0px;padding-right:7px;padding-bottom:0px;padding-left:7px;\">
<br><h3>Browse an Image to Upload:</h3>Image will be resized to <span class=\"fuchsia1\">$img_thumb_width</span> pixels wide.<br>\n
<form method=\"post\" name=\"upForm\" enctype=\"multipart/form-data\" action=\"$_SERVER[PHP_SELF]\">
<br><input type=\"file\" name=\"img_file\" onchange=\"javascript:view_img('img_name');\"><img name='img_name' src='' width='0'><br>
<input type=\"Submit\" name=\"submitUF\" value=\"Upload & Resize\"></form>
</td></tr></table><br clear=\"all\">
";
[/code]

I think it is a case of "Spot the typo" but it has beaten me.
Thanks for help.

[fenway]

You really should pull that out into a variable so you don't have to escape everything... or use singles on the outside.

You really should be using getElementByID and go through the document collection properly, or at the very least, the forms collection, and you're doing neither.

[PerHaPs]

Hi,

To simplify things I have dropped out of PHP mode so the code now looks like this:

[code]
<script>
function showThumb(img_name){
var f = document.getElementById("id1");

document[img_name].src=f.value;
document[img_name].width=100;
}
</script>
<br>
<table align='left' bordercolor='fuchsia' border='1' style='margin-left:50px;' cellspacing='0'>
<tr>
<td valign='top' align='center' style='padding-top:0px;padding-right:7px;padding-bottom:0px;padding-left:7px;'>
<br><h3>Browse an Image to Upload:</h3>Image will be resized to <span class='fuchsia1'><?php echo $img_thumb_width ?></span> pixels wide.<br>
<form method='post' name='upForm' enctype='multipart/form-data' action='<?php echo $_SERVER[PHP_SELF] ?>'>
<br>

<input id="id1" type='file' name='img_file' onchange="javascript:showThumb('tp3');">
<img src='' name='tp3' width='0'><br>
<input type='hidden' name='img_thumb_width' value='<?php echo $img_thumb_width ?>'>
<input type='Submit' name='submitUF' value='Upload & Resize'></form>
</td></tr></table><br clear='all'>
[/code]

document[img_name].src references the image correctly, because if I substitute an actual file name it is displayed.

However,[code]var f = document.getElementById("id1");
[/code]
followed by
[code]f.value][/code]
does not reference the file field value any better than
[code]document.image_file.value][/code]
did

This narrows the question down; what's wrong?!

[fenway]

You're just getting back blank, or undefined, or null, or what?