IE Issue: Submitting form to an iframe using javascript

IE Issue: Submitting form to an iframe using javascript

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.

Solutions/Answers:

Solution 1:

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');

Solution 2:

Welcome to SO.

Related:  How do I prevent a parent's onclick event from firing when a child anchor is clicked?

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>
Related:  Javascript doesn't catch error in WebSocket instantiation

Solution 3:

function sendForm(idform){
    var nfi = "RunF"+tagRandom();
    $("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>");
    $("#"+idform).attr("target",nfi);
    $("#"+idform).submit();
}

Solution 4:

To continue @scunliffe’s answer, if using Prototype.js:

var iframe = Element('iframe', {name: 'frame_x'});

which works because this helper function detects HAS_EXTENDED_CREATE_ELEMENT_SYNTAX for IE, working around the .name = … bug.

References