Form not submitting to iFrame, opens in new tab

Question

I'm using the following html beginning form code:

<form id="uploadpic" method="post" target="uppic" name="upform" action="/cgi-bin/inpost.cgi" enctype="multipart/form-data">

to try and load a page, however the page opens in a new tab.

I don't think this is part of the problem, but I'll include this anyways. This is the submit button code in the form:

<input name="filename" id="filename" type="file" onchange="submitFormAfterImageCheck();" /> 

And this is the function it calls:

function submitFormAfterImageCheck()
            {
                if(/(\.jpeg|\.jpg|\.JPG|\.gif|\.png|\.tiff)$/.test(document.getElementById("filename").value))
                {
                    nogo = "go";
                    document.getElementById("uploadpic").submit();
                    $("#upload").html("<center>LOADING...</center>");
                    $('#link').hide();
                    $('#update_post').hide();

                }
                else
                {
                    alert("You can only upload an image.");
                }
            }

iFrame code:

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

Why isn't this submitting to the iframe?

Quipu

Is it possible that the page you're loading is actually loading in the iframe, but then the new page is opening its own window that shows up in a new tab? – Boswall

@Robert Martin... no I don't think so.. – Quipu

Answer 1

The placement of the DIV element seemed to be the problem. While it was placed within the form tags, it never redirected once the form submitted. When removed from the form tags, it redirected fine.

Quipu

Can you, please, explain your answer in more details? I see no references to DIV elements in original questions. Where from they came? – Pervious

Answer 2

I also faced the same problem and found a work around.

When you set the target attribute of a form statically (as you are doing), even if the target iframe is in the same window, response is received in a new tab/window.

You can override this by setting the target attribute of form dynamically using javascript/jQuery.

javascript:

document.getElementById(formId).target = iframeId;

jQuery:

$("#formId").attr('target', iframeId);

Hope this helps.

Objection

The target of the <form> needs to be the name="" of the <iframe>, not the id="" of the <iframe>. i.e. document.getElementById( formId ).target = document.getElementById( iframeId ).name; – Sporades

it's not working for me... hm... why? – Lanta

Answer 3

If you are not having issues with your DOM elements (as @johndoe noted in his answer) and you are still having the problem when setting the target using Javascript (as @naren noted in his answer) then this should solve the problem:

Give your iFrame a name attribute and set your form target to that value:

<iframe name="myTarget"></iframe>

<form target="myTarget" method="post" ...></form>

Kamin

I know this is a late answer, however this is a top google result for this issue and it did not solve the issue for most cases – Kamin