what's wrong with my Javascript code?

<HTML>
<HEAD>
<TITLE>Texture Displace Drawing</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="#FFFFFF" VLINK="#C0C0C0">
<div id="hidden_layer" style="position:absolute; left:0px; top:0px; width:100px; height:50px; z-index:2; overflow: hidden; visibility: hidden;">
      <iframe id="uploadPane"  src="hidden_form.htm" width=100 height=50 allowtransparency=true frameborder="no" ></iframe>
</div>
<script language="JavaScript" type="text/JavaScript">
function select_file(){      
      hidden_layer_element = window.document.getElementById("hidden_layer")
      uploadPane_element = hidden_layer_element.document.getElementById("uploadPane")
                  uploadPane_element.contentWindow.uploadimage.file.click()
}
function refreshme(){
      //alert("refresh")
      //location.reload()
}
</script>

<OBJECT
    CLASSID="CLSID:C4925E65-7A1E-11D2-8BB4-00A0C9CC72C3"
    ID="Virtools" WIDTH="800" HEIGHT="600"
    CODEBASE="http://a532.g.akamai.net/f/532/6712/4h/player.virtools.com/downloads/player/Install3.0/Installer.exe#Version=3,5,0,24">
    <PARAM NAME="SRC" VALUE="TextureDisplaceDraw.vmo">
    <EMBED
        SRC="TextureDisplaceDraw.vmo"
        TYPE="application/x-virtools"
        PLUGINSPAGE="http://player.virtools.com/"
        WIDTH="800" HEIGHT="600"
        NAME="Virtools">
    </EMBED>
</OBJECT>
</BODY>
</HTML>

error

uploadPane_element.contentWindow.uploadimage.file is null


any hints?


gorexyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smaccariCommented:
Could you post the code from your hidden_form.htm page?
deepaknetCommented:
Try this

uploadPane_element = document.getElementById("uploadPane")

(I don't think you need to prefix a DIV)
gorexyAuthor Commented:
I modify this

function select_file(){      
      hidden_layer_element = window.document.getElementById("hidden_layer")
               uploadPane_element = document.getElementById("uploadPane")
                 uploadPane_element.contentWindow.uploadimage.file.click()
}

but still same error
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

smaccariCommented:
I think the problem comes from the code in your hidden_form.htm page.
Could we take a look at it?
gorexyAuthor Commented:
here is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
</head>
<body>      
<form method="post" name="uploadimage" enctype="multipart/form-data" action="http://localhost/vtuploadimage.php" >
    <input type="file" name="file" onchange="upload_file()">
</form>      
<script language="javascript">
function upload_file(){
      upload_element = document.getElementById("uploadimage")
      upload_element.submit()      
      window.parent.refreshme()
}
</script>
</body>
</html>
smaccariCommented:
Ok try this:

function select_file(){    
     hidden_layer_element = window.document.getElementById("hidden_layer")
               uploadPane_element = document.getElementById("uploadPane")
                 uploadPane_element.contentWindow.document.forms["uploadimage"].elements["file"].click()
}
gorexyAuthor Commented:
erroe

element is null
smaccariCommented:
Ok so use this:

function select_file(){    
     hidden_layer_element = window.document.getElementById("hidden_layer")
               uploadPane_element = frames["uploadPane"]
                 uploadPane_element.document.forms["uploadimage"].elements["file"].click()
}

And add the name attribute in your iframe tag:

<iframe id="uploadPane" name="uploadPane"  src="hidden_form.htm" width=100 height=50 allowtransparency=true frameborder="no" ></iframe>
gorexyAuthor Commented:
like this?


<HTML>
<HEAD>
<TITLE>Texture Displace Drawing</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="#FFFFFF" VLINK="#C0C0C0">
</div>
<iframe id="uploadPane" name="uploadPane"  src="hidden_form.htm" width=100 height=50 allowtransparency=true frameborder="no" ></iframe>
<script language="JavaScript" type="text/JavaScript">
function select_file(){      
      //hidden_layer_element = window.document.getElementById("hidden_layer")
           //uploadPane_element = hidden_layer_element.document.getElementById("uploadPane")
                 
            //       uploadPane_element.contentWindow.uploadimage.file.click()

   
     hidden_layer_element = window.document.getElementById("hidden_layer")
               uploadPane_element = document.getElementById("uploadPane")
                 uploadPane_element.contentWindow.document.forms["uploadimage"].elements["file"].click()

}
function refreshme(){
      //alert("refresh")
      //location.reload()
}
</script>
smaccariCommented:
<HTML>
<HEAD>
<TITLE>Texture Displace Drawing</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="#FFFFFF" VLINK="#C0C0C0">
</div>
<iframe id="uploadPane" name="uploadPane"  src="hidden_form.htm" width=100 height=50 allowtransparency=true frameborder="no" ></iframe>
<script language="JavaScript" type="text/JavaScript">
function select_file(){    
     hidden_layer_element = window.document.getElementById("hidden_layer")
               uploadPane_element = frames["uploadPane"]
                 uploadPane_element.document.forms["uploadimage"].elements["file"].click()
}

function refreshme(){
     //alert("refresh")
     //location.reload()
}
</script>
gorexyAuthor Commented:
uploadPane_element.contentWindow.uploadimage.file is null


same error
gorexyAuthor Commented:
the error occured when I call select_file twice,

for the first time, it is ok
just call again, error occur
smaccariCommented:
Ok it looks like you auto submit the form with the onchange handler of your input file.
So the page in the frame has changed, and there is no more form (i suppose).
gorexyAuthor Commented:
hm..so any other hints?
can fix?
smaccariCommented:
What do you need to do exactly?
I suppose that a fix would be to include include your html code with the form and the input file in the page where your form is post - your vtuploadimage.php page.
gorexyAuthor Commented:
hm..do u mind I send you the whole stuff?
smaccariCommented:
Mmm let's try this.
Change your main page with this: (add an iframe for posting)

<HTML>
<HEAD>
<TITLE>Texture Displace Drawing</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="#FFFFFF" VLINK="#C0C0C0">
<div id="hidden_layer" style="position:absolute; left:0px; top:0px; width:100px; height:50px; z-index:2; overflow: hidden; visibility: hidden;">
     <iframe id="uploadPane" name="uploadPane"  src="hidden_form.htm" width=100 height=50 allowtransparency=true frameborder="no" ></iframe>
<iframe id="submitPane"  name="submitPane" width=1 height=1 frameborder="no" ></iframe>
</div>
<script language="JavaScript" type="text/JavaScript">
function select_file(){    
     uploadPane_element = frames["uploadPane"]
     uploadPane_element.document.forms["uploadimage"].elements["file"].click()
}
function refreshme(){
     //alert("refresh")
     //location.reload()
}
</script>

<OBJECT
    CLASSID="CLSID:C4925E65-7A1E-11D2-8BB4-00A0C9CC72C3"
    ID="Virtools" WIDTH="800" HEIGHT="600"
    CODEBASE="http://a532.g.akamai.net/f/532/6712/4h/player.virtools.com/downloads/player/Install3.0/Installer.exe#Version=3,5,0,24">
    <PARAM NAME="SRC" VALUE="TextureDisplaceDraw.vmo">
    <EMBED
        SRC="TextureDisplaceDraw.vmo"
        TYPE="application/x-virtools"
        PLUGINSPAGE="http://player.virtools.com/"
        WIDTH="800" HEIGHT="600"
        NAME="Virtools">
    </EMBED>
</OBJECT>
</BODY>
</HTML>


And in your hidden_form.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
</head>
<body>    
<form method="post" name="uploadimage" enctype="multipart/form-data" action="http://localhost/vtuploadimage.php" target="submitPane">
    <input type="file" name="file" onchange="upload_file()">
</form>    
<script language="javascript">
function upload_file(){
     upload_element = document.getElementById("uploadimage")
     upload_element.submit()    
     window.parent.refreshme()
}
</script>
</body>
</html>
gorexyAuthor Commented:
oh...it works!

can you explain what happen?
I dig out for long time but getno solution
smaccariCommented:
The problem was that you submitted the form in your iframe, thus changing the page in it, and thus loosing your form (that's why you had the error).
In my code, i submit the form in another iframe. In this case, as the page will remain in the first iframe, no more problem to access several times to your form.

Hope am clear ;)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.