ansaurus

Question

IE Issue: Submitting form to an iframe using javascript

Answer 1

+3 A:

Hi Erwin,

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>

AJ 2010-02-02 01:58:55

Hi! Thanks for the response. Actually, I didn't include in my post the part where the iframe gets appended to a div element, and the element to the document.body (using appendChild).Given that the iframe has already been added to the body, the form is still not targetting the iframe. But this only occurs in IE.

Erwin Paglinawan 2010-02-02 02:08:50

@Erwin, you are absolutely right. I've been experimenting with this and I updated my answer. Hope it helps.

AJ 2010-02-02 02:22:54

This worked! Nice one. However, I still have some unresolved questions.What could have been the difference? Isn't it enough just to have a reference to the form object (using getElementById in this case)?Also, when I tried creating the form using javascript, instead of having a form element inside the html, the same problem re-occurred. But this time, the if-else clause for IE/FF implementations no longer seems to work. Any idea?But still, thanks for the answer!

Erwin Paglinawan 2010-02-02 02:55:49

see my answer for why it didn't work at first... you can't use setAttribute() to set the name in IE.

scunliffe 2010-02-02 03:00:29

The `if` statement seems rather redundant here, the code that works for Firefox should work just as well for IE, so there's no point to the IE-specific code.

Andy E 2010-02-02 08:41:34

Answer 2

+8 A:

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

scunliffe 2010-02-02 02:49:52

+1 good info..thanks

AJ 2010-02-02 03:50:49

Thanks scunliffe. This is a very useful information.

Erwin Paglinawan 2010-02-02 08:05:45

+1 - in my mind the correct answer here.

Andy E 2010-02-02 08:39:05

ansaurus

tags:

views:

answers:

IE Issue: Submitting form to an iframe using javascript

related questions