Question

我的问题是我使用PHP成功递增了我网页上“input”元素中显示的计数（见下文） - 但是在我的javascript中我无法检索增加的值 - 我得到了旧的未增加的数字

我将表单发布到隐藏的iframe，iframe的PHP代码更新了我的页面上的输入控件 - 此处的代码来自 loadImages.php ：

 <form style="display: inline-block" name="pictureForm" method="post" 
              autocomplete="off" enctype="multipart/form-data">
   <input type="file" name="picture" id="picture" 
           onchange="return bkgdFileUpload(this);" style="display: inline-block"/>
   <input id="thumbImageCount" name="thumbImageCount"  style="border: 2px solid red" 
                                 value="<?php echo $imageCount ?>" />
 </form>

上面的'imageCount'PHP变量在页面加载时赋值为0。请注意，当用户选择一个图像文件时，会调用函数 bkgdFileUpload（this）（这里传递'this'也会将当前DOM'文档'对象传递给该bkgdFileUpload（）函数吗？我带来了以下是我问题的可能原因。）

这是 bkgdFileUpload（）功能：

 function bkgdFileUpload(upload_field)
 {
    var currentImageCount = document.getElementById('thumbImageCount').value;

      // THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
    alert("The currentImageCount is: " + currentImageCount);

     // THIS POSTS THE FORM -- NOTE THE 'action' FILE AND THE 'target'
    upload_field.form.action = 'photoPreview.php';
    upload_field.form.target = 'upload_iframe';
    upload_field.form.submit();

     // I know for a fact that before the next bit of code executes, the form
     // has been fully processed because my web page suddenly shows the 'count' 
     // increase on my web page *before* the "alert()" box below appears

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO, *DESPITE* THE FACT THAT
      // THE "thumbImageCount" CONTROL DISPLAYS A "1" !!
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);
 }

您注意到我将此表单的目标设置为DOM元素'upload_iframe'，该元素与上面的代码位于相同的 loadImages.php 文件中 - 这是iframe标记

 <iframe name="upload_iframe" id="upload_iframe" 
             style="display:block; border: 2px solid red"></iframe>

因此表单的“目标”是iframe;处理表单的文件名为 photoPreview.php

当表单的PHP代码执行时，表单是POST'd，我的PHP代码会增加图像的数量（以及其他内容）。以下是在 photoPreview.php 中处理上述表单的PHP代码：

 if(isset($_POST['thumbImageCount']))
 {
    $curImageCount = $_POST['thumbImageCount'];

    $newImageCount = $curImageCount + 1;

    echo '<script type="text/javascript">'."\n";

       // THE FORM'S "target" IS AN IFRAME ON MY WEB PAGE, SO
       // GET THE IFRAME'S PARENT DOCUMENT WHICH IS MY WEB PAGE'S
       // DOCUMENT OBJECT so I can update that page's "thumgImageCount"
    echo 'var parDoc = parent.document;' . "\n";

    echo "\n parDoc.getElementById('thumbImageCount').value = '" 
              . $newImageCount . "';";
    echo "\n".'</script>';
    exit();
 }

您可以查看上面的 bkgdFileUpload（）函数，了解表单的发布方式：

 function bkgdFileUpload(upload_field)
 {
    var currentImageCount = document.getElementById('thumbImageCount').value;

      // THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
    alert("The currentImageCount is: " + currentImageCount);

    upload_field.form.action = 'photoPreview.php';
    upload_field.form.target = 'upload_iframe';
    upload_field.form.submit();

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO, DESPITE THE 'imageCount' 
      // input VALUE SHOWING THE *CORRECT* INCREMENTED VALUE (i.e. the
      // web page indicates that before the next 2 lines of code execute,
      // the 'thumbImageCount' already correctly displays the incremented number
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);
 }

这是（微妙的？）问题。在我的网页上，“thumbImageCount”输入控件（见上文）实际上显示了正确递增的1 值。我可以看到更新发生在页面上，并且它发生之前执行上面的最后两行代码。

换句话说，上面代码的最后一行alert（）显示了OLD值，我看不到我的网页如何在“thumbImageCount”中显示正确的值但是alert（）仍然显示旧的价值。

      // AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
      // HAS BEEN UPDATED -- BUT IT IS STILL ZERO EVEN THOUGH THE
      // 'thumbImageCount' input ON MY WEB PAGE SHOWS THE CORRECTLY INCREMENTED
      // NUMBER 
    var newImageCount = document.getElementById('thumbImageCount').value;
    alert("The newImageCount is:" + newImageCount);

现在，我的运行理论是，不知何故，通过在html代码中传递'this'，当调用bkgdFileUpload（）时，当前DOM的 copy 被推送到堆栈上调用框架并在bkgdFileUpload（）中，即使页面显示正确的值，bkgdFileUpload（）仍然具有DOM的文档对象的旧副本。

还是其他什么？

Answer 1

解决方案是DOM被缓冲（'保留'），我不得不强制DOM更新我的页面。我这样做的方法是在这篇SO帖子上回答＃3：
“强制DOM刷新”在Forcing a DOM refresh in Internet explorer after javascript dom manipulation

请注意，我在Firefox中开发，上述解决方案在Firefox中也运行良好。

文档更新，但getElementById（）返回不正确的值？

1 个答案: