How can I use jQuery to dynamically load html into an iFrame?

StackOverflow https://stackoverflow.com/questions/16380997

  •  14-04-2022
  •  | 
  •  

Question

I'm working on an iframe file uploader (so my file uploader appears to be ajax). I'm trying to take the form on my page and insert it into an iframe. Then I will submit the form inside the iframe. However, it isn't working. Here is my code:

jQuery:

function submitFile() {
    $(document).ready(function() {
        if ($('[name=files]').val() != "")
        {
            var fileForm = $('#attachFile').html();
            $('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame">'+fileForm+'</iframe>');
        }
    });
}

HTML:

<body>
    <div id="emptyDiv"></div>
    <div id="attachFile">
        <form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile">
            <input type="file" name="files" id="files">
            <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
        </form>
    </div>
</body>

This obviously isn't a complete solution, but I notice that after submitting the form I do manage to get the iframe inserted into the <div id="emptyDiv"> element. However, inside the iframe is the following code:

#document
<html>
    <head></head>
    <body></body>
</html>

But what I expect to see inside the iframe is the html contents located inside the form <div id="attachFile">. What am I missing?

Was it helpful?

Solution

You don't try to copy the form to a hidden iframe, you submit the form to the hidden iframe. Set the target attribute (or property) of the form to the name of the iframe.

var fileForm = $('#attachFile form').prop('target', 'hiddenIframe');
$('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame"></iframe>');

or

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
</form>

OTHER TIPS

Try turning your HTML into a separate page and referencing it with the src attribute of the iframe.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top