Firefox form targeting an iframe is opening new tab

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>

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!


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!


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