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?

Answer 1

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.

Answer 2

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>