Unable to get value of the property 'submit': object is null or undefined

Question

i have a iframe and form like this :

<iframe id="FileUploadFrame" name="FileUploadFrame" src="" style="display: none; border: 0; width: 0; height: 0;">
            <form id="FileUploadForm" name="FileUploadForm" accept-charset="utf-8"  target="FileUploadFrame" enctype="multipart/form-data" encoding="multipart/form-data" method="POST" action="CIMtrek_Regional_WhseForm_FileUpload">
   </form>
</iframe>

and this is how i submit the form which in iframe

function fileUpload() {

    //var UploadForm = document.forms["FileUploadForm"];
    var UploadForm = global.forms["FileUploadForm"];

    alert("Form : "+typeof global.forms["FileUploadForm"]);
    alert("Form : "+typeof global.forms["FileUploadFrame"]);
    iframeId = document.getElementById("FileUploadFrame");


    // Add event...
    var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;
    }
    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    //alert('submitting form');
    //form.submit();
    //document.forms["FileUploadForm"].submit();
    alert(UploadForm.submit());
}

but i get the following exception when submitting the form :

Error: Unable to get value of the property 'submit': object is null or undefined

Please help me to find the problem and fix.

Best Regards

what's global.forms ? what does it do ? Is global a jsp or another html mark up in another file ? — The Dark Knight, Feb 07 '13 at 09:55
var global = window.document, I have also tried the following `var UploadForm = document.forms["FileUploadForm"]` and `var UploadForm = document.forms["FileUploadForm"].submit()` — Java Questions, Feb 07 '13 at 09:56
Where did you the javascript code place? Within or outside of the iframe? — Reporter, Feb 07 '13 at 09:56
it is a separate .js file where i have grouped all my java script methods and call them wherever needed. — Java Questions, Feb 07 '13 at 09:58
@Anto I suggest using console.log instead of alert, and first try to see if global is set to anyting: console.log("global is now:",global) in IE you can start debugging by pressing F12 under script you can start debugging. Once you've done that console.log is supported (poorly) in IE — HMR, Feb 07 '13 at 10:00
I suggest you go through this : http://stackoverflow.com/questions/14353748/how-to-get-a-drop-down-selected-text-from-an-iframe This deals with this kind of iframe specific problem . Normally the problem is , it never finds the iframe, since the id is in parent, hence you need to gove parent.document.getElementByID(). You can also frameElement to get the iframe-id directly and then you can feed it to document.getElementbyD(frameElementID)--> This is much better and will always get the frameElement. Google to see how to use FrameElement . — The Dark Knight, Feb 07 '13 at 10:35
Great comment, this is what i do : i have the file input in the parent form, i have to save the file selected in the parent form through this iframe, i should be like ajax call but actually it is not. in this case how to get the file selected in the parent form and assign the file to a file input in the form which is in iframe — Java Questions, Feb 07 '13 at 10:50

pbaris · Answer 1 · 2013-02-07T10:04:59.743

1

There is no document.forms["FileUploadForm"] cause your form is in an iframe. The document of the iframe is different from the document that your script is executed.

in your script add this line in the begining of the function

var iframe = document.getElementById('FileUploadFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var UploadForm = innerDoc.forms["FileUploadForm"];

edited Feb 07 '13 at 10:04

answered Feb 07 '13 at 09:57

pbaris

4,525
5
37
61

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

The way to get the FileUploadForm is:

iframeId = document.getElementById("FileUploadFrame");
//This is the trick
var ifrDoc = iframeId.contentDocument || iframeId.contentWindow.document;
var UploadForm = ifrDoc.getElementById("FileUploadForm");

Or you could have some code in the frame that sets a variable in parent to the form, but I wouldn't trust that method.

Source: accessing a form that is in an iframe

EDIT:

Also, for get the upload form valid it needs to looks just like any other form except:

the form tag must specify the POST method
the form tag must specify an enctype of multipart/form-data
the form must contain an <input type=file> element.

edited May 23 '17 at 11:48

Community

1
1

answered Feb 07 '13 at 10:03

Tomas Ramirez Sarduy

17,294
8
69
85

Previous one is gone and get this now `Error: TypeError: UploadForm is null` – Java Questions Feb 07 '13 at 10:14
@Anto: Check update, you need at least `` element inside the form – Tomas Ramirez Sarduy Feb 07 '13 at 10:22
i have the file input in the parent form, i have to save the file selected in the parent form through this iframe, i should be like ajax call but actually it is not. in this case how to get the file selected in the parent form and assign the file to a file input in the form which is in iframe – Java Questions Feb 07 '13 at 10:50

Unable to get value of the property 'submit': object is null or undefined

2 Answers2