title: document updating but getElementById() returns incorrect value?
body: <p>My problem is I successfully increment a count displayed in an "input" element on my web page using PHP (see below) -- but in my javascript I am unable to retrieve the incremented value -- I get the old unincremented number.</p>
  
  <p>I post a form to a hidden iframe and the iframe's PHP code updates an input control on my page -- the code here is from <strong>loadImages.php</strong>:</p>
  
  <pre><code> &lt;form style="display: inline-block" name="pictureForm" method="post" 
                autocomplete="off" enctype="multipart/form-data"&gt;
     &lt;input type="file" name="picture" id="picture" 
             onchange="return bkgdFileUpload(this);" style="display: inline-block"/&gt;
     &lt;input id="thumbImageCount" name="thumbImageCount"  style="border: 2px solid red" 
                                   value="&lt;?php echo $imageCount ?&gt;" /&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>The 'imageCount' PHP variable above assigns a value 0 when the page loads.  Notice above that the function <strong>bkgdFileUpload(this)</strong> gets called when the user selects an image file (does passing 'this' here also pass the current DOM 'document' object to that bkgdFileUpload() function? I bring this up below as a possible reason for my problem).</p>
  
  <p>Here is that <strong>bkgdFileUpload()</strong> function:</p>
  
  <pre><code> 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);
   }
  </code></pre>
  
  <p>You notice I set this form's target to the DOM element 'upload_iframe' which is in the same <strong>loadImages.php</strong> file as the code above -- here is that iframe tag</p>
  
  <pre><code> &lt;iframe name="upload_iframe" id="upload_iframe" 
               style="display:block; border: 2px solid red"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>So the form's "target" is an iframe; the file that processes the form is called <strong>photoPreview.php</strong></p>
  
  <p>When the form's PHP code executes as the form is POST'd, my PHP code increments the count of images (among other things).
  Here is the PHP code that processes the form above, inside <strong>photoPreview.php</strong>:</p>
  
  <pre><code> if(isset($_POST['thumbImageCount']))
   {
      $curImageCount = $_POST['thumbImageCount'];
  
      $newImageCount = $curImageCount + 1;
  
      echo '&lt;script type="text/javascript"&gt;'."\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".'&lt;/script&gt;';
      exit();
   }
  </code></pre>
  
  <p>You can review the <strong>bkgdFileUpload()</strong> function above as to how the form is posted:</p>
  
  <pre><code> 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);
   }
  </code></pre>
  
  <p>Here's the (subtle?) problem.  On my web page, the "thumbImageCount" input control (see above) in fact shows the <em>correctly incremented-by-1</em> value.  I can see the update happen right there on the page, and it happens <strong>before</strong> the last 2 lines of code above execute.  </p>
  
  <p>In other words, the alert(), the last line of code above, displays the OLD value and I don't see how my web page can be showing the right value inside "thumbImageCount" but that alert() still shows the old value.</p>
  
  <pre><code>      // 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);
  </code></pre>
  
  <p>Right now, my running theory is that somehow, by passing 'this' in the html code, when bkgdFileUpload() gets called, a <strong>copy</strong> of the current DOM is pushed on the stack for the call frame and within bkgdFileUpload(), even though the page displays the right value, bkgdFileUpload() still has an old copy of the DOM's <em>document</em> object.</p>
  
  <p>Or something else?</p>