Firefox form targeting an iframe is opening new tab

Question

<form method="post" target="take_the_reload">

    ...

</form>


<iframe class="hide_me" name="take_the_reload"></iframe>

My issue is as follows:

I have a form that needs to be prevented from refreshing the page it is located on when it is submitted. To combat this issue, I have been using an empty iframe as the target for the form. This works exactly as expected in Chrome (v12.0.742) but fails in Firefox (v6.0).

What happens in Firefox, is that the iframe is opened in a new tab upon form submission, which is obviously not what I want.

I have found some related posts, but none address my particular situation and their solutions do not work.

Unfortunately, the work is on a proprietary system in a private network so I can not just simply provide a link.

I have also tried using a frame as opposed to an iframe as an answer to a related topic was that using iframes in such a manner is deprecated. But the results are identical.

Also the iframe is hard-coded into the page in the sense that it is not dynamically added with JavaScript. Finally, like I said earlier, this works flawlessly in Chrome, but fails to work at all in Firefox. IE is not a concern and so any non-IE-friendly solutions are welcome!

Answer 1

This might sound stupid but did you try giving the iframe an id the same as the name attribute? This seems to solve some problems relating to forms.

<form method="post" action="link/to/post/to" target="take_the_reload">      ...  </form>  <iframe id="take_the_reload" name="take_the_reload"></iframe> 

Answer 2

TIP: Don't use capital letters in id and name

Doesn't work

<iframe id="formSubmit" name="formSubmit"> 

Works

<iframe id="form_submit" name="form_submit"> 

That was such a surprise for me!

Answer 3

For anyone in the future looking into this, note that if you have two or more forms that target the same iframe id, Firefox will open a new tab unless the two forms have different names. Strangely enough, this isn't an issue in Chrome. So, for example, this won't work in Firefox

<form method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<form method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<iframe id="theiframe" name="theiframe"></iframe>

but it will work in Chrome. If you want the code to work in both Chrome and Firefox you'd have to do something like:

<form name="form1" method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<form name="form2" method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<iframe id="theiframe" name="theiframe"></iframe>

Don't know if this is a bug or Firefox is just designed that way. I'm working with Firefox 18 (latest version as of the time of this writing) and it's still a problem.

Hope this helps someone else; I was gnashing my teeth over this for about 2 hours before I finally figured out what the problem was.

Cheers!

Answer 4

For those who may come across this problem later on, I solved it by adding a name attribute to to the iframe that was the same as the id of the iframe:

<iframe id='iframeID' name='iframeID'></iframe>

Stupid, yes, but that's the firefox likes it