submit form data into iframe via post [file upload]

Question

UGH.

Hi.

I have a form. I'd like to know how/if I could submit this form to an iFrame that has the page that will handle the file upload/naming.

If I try even something simple like post an input/text to the form, nothing happens (the handler is set to echo the $_POST). I have tried setting the iframe name/id et. al. and setting the form target to the respective iframe name/id. When I hit submit, the iframe just sits there like a dummy. WTF am I doing wrong?

Thx.

echo "<form action=\"/clients/testAddTrans/$clientID\" id=\"reportEdit\" class=\"EditName\" method=\"POST\" target=\"transFrame\">";
echo "<div class=\"inputDiv\"><span class=\"inputLabel\">Description:</span><span class=\"textInput\"><input type=\"text\" id=\"transDesc\" name=\"transDesc\" value=\"\" size=\"40\" class=\"\"/></span></div>";
echo "<div class=\"inputDiv\"><span class=\"inputLabel\">Date:</span><span class=\"textInput\"><input type=\"text\" id=\"date\" name=\"transDate\" value=\"\" size=\"40\" class=\"\"/></span></div>";
echo "<div class=\"inputDiv\"><span class=\"inputLabel\">File:</span><span class=\"textInput\"><input type=\"file\" id=\"file\" name=\"transFile\" value=\"\" size=\"40\" class=\"\"/></span></div>";
echo "<input name=\"name_id\" type=\"hidden\" value=\"" . $itemid . "\">";
echo "</div>";
echo "</div><br>
<div id=\"overDivActions\" align=\"center\" class=\"actions\">
<input type=\"submit\" value=\"Submit\" name=\"submit\"/>
<input type=\"button\" class=\"secondaryAction\" onclick=\"hideOverDiv()\" value=\"Close\"/>
</div>
<div id=\"overDivNotice\" class=\"overDivNotice\" style=\"display:none\">
</div>";
echo"</fieldset>
</div>
<iframe action=\"/clients/testAddTrans/$clid\" id=\"transFrame\" name=\"transFrame\" style=\"\"></iframe>
</form>";

Generated html via firebug:

    <div class="content" id="overDivContent"><div class="inputDivContainer">
  <fieldset class="inputOverDiv" id="tfa_Names">
 <legend><b>Add Transmittal:</b></legend>
  <div class="data"><form target="transFrame" method="POST" class="EditName" id="reportEdit" action="/clients/testAddTrans/fsdf1556"><div class="inputDiv"><span class="inputLabel">Description:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span></div><div class="inputDiv"><span class="inputLabel">Date:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span></div><div class="inputDiv"><span class="inputLabel">File:</span><span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span></div><input type="hidden" value="121" name="name_id"/>
  </form><br/>
  <div align="center" class="actions" id="overDivActions">
   <input type="submit" name="submit" value="Submit"/>
   <input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
  </div>
  <div style="display: none;" class="overDivNotice" id="overDivNotice">
  </div></div>


  <iframe style="" name="transFrame" id="transFrame">tyh</iframe>
  </fieldset>
  </div></div>

I don't know why it is putting the </form> tag where it is.. It is supposed to be after the iframe, but whatever. Does that even matter? Is the iframe supposed to be inside the form?

Answer 1

Your logic appears valid, can you setup a test page?

Answer 2

Nice, I was wrong.. I found the problem. First use html for write html; With the code below works:

for 'testSubmitiFrame.html':

    <form target="transFrame" method="POST" class="EditName" id="reportEdit" action="testSubmitiFrame.php">
<div class="content" id="overDivContent">
    <div class="inputDivContainer">
     <fieldset class="inputOverDiv" id="tfa_Names">
     <legend><b>Add Transmittal:</b></legend>
     <div class="data">
      <div class="inputDiv">
       <span class="inputLabel">Description:</span>
       <span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span>
      </div>
      <div class="inputDiv">
       <span class="inputLabel">Date:</span>
       <span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span>
      </div>
      <div class="inputDiv">
       <span class="inputLabel">File:</span>
       <span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span>
      </div>
      <input type="hidden" value="121" name="name_id"/>
      <br/>
      <div align="center" class="actions" id="overDivActions">
       <input type="submit" name="submit" value="Submit"/>
       <input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
      </div>
      <div style="display: none;" class="overDivNotice" id="overDivNotice"></div>
     </div>
     </fieldset>
    </div>
</div>
</form>
<iframe style="" name="transFrame" id="transFrame">tyh</iframe>

for 'testSubmitiFrame.php':

<?php
var_dump($_POST);
?>

Your problem is html syntax. This works.

Answer 3

This page will do what you want, so you may want to look through it and see what may be different from what you are already doing: http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml

Is the action in the html the php file that will do the processing?

Answer 4

Apparently, a div or stupid fieldset tag being out of place was preventing the thing from working. I really gotta start checking my code before bothering you nice people.

Thanks anyway.

Answer 5

I think it's because of these two lines:

echo "</div>";
echo "</div><br>

You're closing <div> with no opening tags. This is making Firefox close the <form> early - your submit button isn't inside your form, which is why it's not working.

The position of the iframe inside or outside the form doesn't matter - just make sure the rest of the HTML is valid and it should work.