IE Issue: Submitting form to an iframe using javascript

user_243231 0
Viewed 31481

I was trying to create an iframe element using javascript, like so:

var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');

However, when I tried submitting a form using the newly-created iframe as target, IE opens up a new window, instead of using the iframe. 

form.setAttribute('target', 'frame_x');
form.submit();

This works perfectly in Firefox. Also, the iframe gets created, but is not used.

forms iframe javascript
4 Answers

You've hit a bug in Internet Explorer.

You CAN NOT set the name attribute of ANY element in IE using the standard DOM Method .setAttribute('name', value);

In IE (before version 8 running in IE8 standards mode) this method will not work to set the name attribute.

You need to use one of the following:

//A (any browser)
var iframe = document.createElement('iframe');
iframe.name = 'frame_x';

//B (only in IE)
var iframe = document.createElement('<iframe name="frame_x"/>');

//C (use a JS library that fixes the bug (e.g. jQuery))
var iframe = $('<iframe name="frame_x"></iframe>');

//D (using jQuery to set the attribute on an existing element)
$('iframe:first').attr('name','frame_x');
user_61440

Welcome to SO.

One issue I saw in your code is that you're never actually displaying the iframe. In order for it to appear on the page, you have to insert it into your document. In my example, I create a <span> tag to act as the slot where the iframe will get inserted.

See if this does what you're looking for.

<!-- http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript -->

<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
    var form=document.getElementById('myform');
    form.setAttribute('target', 'frame_x');
    form.submit();
}
</script>
</head>

<body>
<h1>Hello Erwin!</h1>

<form id="myform" name="myform" action="result.html">
    <input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>


<span id="iframeSlot">

<script type="text/javascript">
    var iframe = document.createElement('iframe');
    iframe.setAttribute('name', 'frame_x');
    document.getElementById('iframeSlot').appendChild(iframe);
</script>
</span>
</body>
</html>

UPDATE:

I found that this solution is only working in Firefox. So I did some experimenting. It seems that if you define the iframe in the html (instead of generating it via JS/DOM) then it works. Here is the version that works with IE and Firefox:

<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
    //IE
    if( document.myform ){
        document.myform.setAttribute('target','frame_x');
        document.myform.submit();
    //FF
    } else {
        var form=document.getElementById('myform');
        form.setAttribute('target', 'frame_x');
        form.submit();
    }
}
</script>
</head>

<body>
<h1>Hello Erwin!</h1>

<form id="myform" name="myform" action="result.html" target="">
    <input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>

<span id="iframeSlot">
<iframe name="frame_x">
</iframe>
</span>
</body>
</html>
user_1993970
Related