<input />不会更新

Question

我的代码使用隐藏的iframe上传，然后在我的网页上显示最多4张照片。

下面的代码将当前图像的数量加1，以跟踪已上传的图像数量。当我尝试将此值存储到我的网页上的简单输入控件＆＃34; thumbImageCount＆＃34;时，输入控件的值不会更新。

parDoc＆＃39;＆＃39; parDoc＆＃39;在下面的PHP代码中 - 所有这些PHP代码都发生在我的网页隐藏的iframe中，我需要更新iframe的父文档，我的网页的文档对象，而不是iframe＆ ＃39; s文档（我在Ajaxie中使用＆＃39;隐藏的iframe＆＃39;技术）：

 echo '<script type="text/javascript">'."\n";
 echo 'var parDoc = parent.document;' . "\n";

 $curImageCount = $curImageCount + 1;
 $outStr = "parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>';";
 $outStr3 = "\n parDoc.getElementById('picture_path_hidden').value = '" . $fullImagePath . "';";
 $outStr4 = "\n parDoc.getElementById('" . $thumbWindowName . "').src = '" . $fullImagePath . "';";
 $outStr5 = "\n parDoc.getElementById('" . $thumbWindowName . "').style.display = 'inline-block';";
 $outStr6 = "\n parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";
 $outStr7 = "\n alert('photoPreview.php, the new image count (aka curImageCount) is: " . $curImageCount . "');";
 echo $outStr;  
 echo $outStr3;  
 echo $outStr4;  
 echo $outStr5;  
 echo $outStr6;  
 echo $outStr7;  
 echo "\n".'</script>';

请注意，在 outStr7 中，iframe会发出警告＆＃39;父母（我的网页＆＃39; s）文档上的框。 ALERT告诉我图像计数已成功递增。

请注意，在 outStr6 中，我将相同的图像数量保存到ID为＆＃39; thumbImageCount＆＃39;的输入元素中。

所以在我看来，由于outStr7中的警告框（在 outStr6之后）显示正确的新增量图像计数，因此＆＃39; thumbImageCount＆＃39;我页面上的输入控件。

IT DOESN＆＃39; T。这是＆＃39; thumbImageCount＆＃39;的html。在我的网页上：

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="<?php echo $imageCount ?>" />

我的网页允许上传和显示4张图片。为此，页面不重新发布到Web服务器（我通过使用隐藏的iframe技术避免这种情况）。

因此，当您注意到上述情况时，我将 thumbImageCount 输入控件的html标记中的初始值设置为名为＆＃39; imageCount＆＃39;的PHP变量，即0（零） - 由于我的网页只加载一次，输入控制的值，在被PHP变量初始化为零（0）之后，应该可以通过这一行来更新我隐藏的iframe来自上面的PHP代码：

 $outStr6 = "\n parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";

但它没有发生。加载4张图片后，我会查看页面来源＆＃39;在我的网页上查看是否有＆＃39; thumbImageCount＆＃39;输入控件已更新为值4，这就是我所看到的：

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="0" />

所以，如果你看看所有的＆＃39; outstrs＆＃39;在我上面的PHP代码中，所有这些都在工作 - 图像在我的网页上显示正常。只有outStr6失败。

我在这里缺少什么？我需要＆＃39; thumbImageCount＆＃39;要在我的网页上正确更新，我需要设置“所选图片”。到新上传的图片。

Answer 1

您的代码没有任何根本错误。如果您的输入未被隐藏，您可能已经看到它的值已被更改。

但是，您不会通过“查看页面源”看到代码更改，因为源代码不会动态更改 - 它在内存中的“复制”（称为DOM）会发生。

将来，请使用浏览器的开发者工具来检查动态更改，并且为了我们所有的缘故，请不要使用iframe执行“ajax”。

Answer 2

我只想添加@ Brian的回答，并提出有关代码输出的建议。输入代码并不是必需的，也不是一个好主意。我建议使用以下多行：

echo <<<END
<script type="text/javascript">
     var parDoc = parent.document;
     parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>';
     parDoc.getElementById('picture_path_hidden').value = '$fullImagePath';
     parDoc.getElementById('$thumbWindowName').src = '$fullImagePath';
     parDoc.getElementById('$thumbWindowName').style.display = 'inline-block';
     parDoc.getElementById('thumbImageCount').value = '$curImageCount';
     alert('photoPreview.php, the new image count (aka curImageCount) is: $curImageCount');
</script>
END;

这看起来更干净，更容易阅读。如果它们不是变量，请记住要逃避任何$，但这似乎不是问题。

Answer 3

此处未找到解决方案;我不得不重新发布并重新构建这个问题，我在document updating but getElementById() returns incorrect value?

做了这个问题

最终问题是由于页面，DOM被缓冲而且解决方案是强制DOM更新，以便getElementById（）将检索 thumbImageCount 输入元素的更新状态。显然当页面上的某些内容被修改时，DOM不会立即更新，我不得不强制更新，这在上面链接的新帖子中有所描述。