Get variable from iframe after form is submit to it?

Question

$(function() {
    $(".preview").click(function() {
        $('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
        $('#imageform').submit();
        $('#image').unwrap();
        var image = $('#imageupload').filename;
        return false;
    });
});

<iframe style="display: none;" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">

In the above code after the image is submit to the server it creates a variable in the iframe for me to retrieve containing the filename of the image uploaded. The problem I have is that when retrieving the filename jQuery's .submit() function doesn't have any callbacks when the form is submit thus while the image is uploading my code tries to get the filename when it isn't there yet. Does anyone know a way I can get around this?

Is this your actual code? It looks like the input for the image is outside the iframe, not in it. Please be sure to post real code so we don't spend time troubleshooting a problem that isn't real. :) — jamesmortensen, Apr 05 '12 at 07:48
That is my real code, the image is being submit to the iframe for processing. The iframe saves the file on the server and creates a variable in the iframe containing it's filename. I need to retrieve the filename from the iframe. — Renari, Apr 05 '12 at 07:53
Are you sure the target attribute will target the iframe? I was just reading today that whatever name is passed into "target" is used as the title of a new window, and any new links clicked will replace that target. It mentioned nothing of targeting iframes. Perhaps you know something I don't, but you should double check that just in case :) Good luck! — jamesmortensen, Apr 05 '12 at 08:40
You learn something new everyday, wow. Check this link out, it may help you: http://stackoverflow.com/q/168455/552792 — jamesmortensen, Apr 05 '12 at 08:46
Thanks but I already am submitting the form to the iframe I need to get data back from it. — Renari, Apr 05 '12 at 09:25

score 1 · Accepted Answer · edited Apr 06 '12 at 05:32

1

I found that iframes themselves have an onload event thus I was able to trigger this after submitting to the iframe and the code continues as desired after the file is uploaded.

$(function() {
   $(".preview").click(function() {
       $('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
        $('#imageupload').attr('onload', 'preview()');
        $('#imageform').submit();
        $('#image').unwrap();
        return false;
   });
});
function preview() {
    var image = $('#imageupload').contents().find('#filename').html();
}


<iframe style="display: none;" onload="" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">

edited Apr 06 '12 at 05:32

jamesmortensen

33,636
11
99
120

answered Apr 05 '12 at 22:22

Renari

822
7
16
32

+1 - Good job solving your own question! You can mark this as the accepted/best answer by clicking the checkbox on the left side of the answer. This will appear as a reference to others who have this same problem. :) – jamesmortensen Apr 06 '12 at 05:33
1

Will do, but since I have less than 100 reputation I can't mark my own post as the answer for 24 hours. – Renari Apr 06 '12 at 05:41
Oh, right. Forgot about that. Well, time for you to go find some questions you can answer so you can get above the 100 threshold. :) – jamesmortensen Apr 06 '12 at 05:43

Get variable from iframe after form is submit to it?

1 Answers1