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.

<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?

Can you give us the HTML rather than the PHP? What you have looks OK (though iframes don't have an action attribute - did you mean src?) — Greg
– Greg, Commented Oct 14, 2009 at 19:22
Yeah, I meant src. I added that in as I was typing here, and fumbled. — stormdrain
– stormdrain, Commented Oct 14, 2009 at 19:24

Cesar · Accepted Answer · 2009-10-14 20:24:54Z

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.

Right now, I don't care about the file. I can't even get it to echo a textfields post data.

stormdrain · Accepted Answer · 2009-10-14 19:51:04Z

1

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.

answered Oct 14, 2009 at 19:51

stormdrain

7,8954 gold badges40 silver badges76 bronze badges

Comments

R0b0tn1k · Accepted Answer · 2009-10-14 19:20:51Z

0

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

answered Oct 14, 2009 at 19:20

R0b0tn1k

4,31415 gold badges50 silver badges66 bronze badges

Comments

James Black · Accepted Answer · 2009-10-14 19:40:39Z

0

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?

answered Oct 14, 2009 at 19:40

James Black

41.8k10 gold badges92 silver badges172 bronze badges

2 Comments

stormdrain Over a year ago

I looked at that. Problem is that I be using prototype, and it conflicts with like 30 miles of code I've written already. And jQuery.noconflict() is toMe.noHelp()

James Black Over a year ago

The javascript part shouldn't be a big deal, you just need to do a submit when the button is clicked, and ignore the validation. You can get the javascript part to be small, and just fix it to use prototype.

Greg · Accepted Answer · 2009-10-14 19:53:35Z

0

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.

answered Oct 14, 2009 at 19:53

Greg

323k55 gold badges378 silver badges338 bronze badges

Collectives™ on Stack Overflow

submit form data into iframe via post [file upload]

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related