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?
 
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 ;)
0
 
smaccariCommented:
Could you post the code from your hidden_form.htm page?
0
 
deepaknetCommented:
Try this

uploadPane_element = document.getElementById("uploadPane")

(I don't think you need to prefix a DIV)
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
0
 
smaccariCommented:
I think the problem comes from the code in your hidden_form.htm page.
Could we take a look at it?
0
 
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>
0
 
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()
}
0
 
gorexyAuthor Commented:
erroe

element is null
0
 
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>
0
 
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>
0
 
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>
0
 
gorexyAuthor Commented:
uploadPane_element.contentWindow.uploadimage.file is null


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

for the first time, it is ok
just call again, error occur
0
 
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).
0
 
gorexyAuthor Commented:
hm..so any other hints?
can fix?
0
 
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.
0
 
gorexyAuthor Commented:
hm..do u mind I send you the whole stuff?
0
 
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>
0
 
gorexyAuthor Commented:
oh...it works!

can you explain what happen?
I dig out for long time but getno solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.