submit form data into iframe via post [file upload]

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.

<form action="/clients/testAddTrans/<?=$clientID?>" id="reportEdit" class="EditName" method="POST" target="transFrame">
    <div class="inputDiv">
        <span class="inputLabel">Description:</span>
        <span class="textInput">
            <input type="text" id="transDesc" name="transDesc" value="" size="40" class=""/>
        </span>
    </div>
    <div class="inputDiv">
        <span class="inputLabel">Date:</span>
        <span class="textInput">
            <input type="text" id="date" name="transDate" value="" size="40" class=""/>
        </span>
    </div>
    <div class="inputDiv">
        <span class="inputLabel">File:</span>
        <span class="textInput">
            <input type="file" id="file" name="transFile" value="" size="40" class=""/>
        </span>
    </div>
    <input name="name_id" type="hidden" value="<?=$itemid?>" />
    <input type="submit" value="Submit" name="submit"/>
    <input type="button" class="secondaryAction" onclick="hideOverDiv()" value="Close"/>
    <div id="overDivNotice" class="overDivNotice" style="display:none"></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?

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.

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.

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

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?

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.