Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35940 > unrolled thread

Not able to obtain any form objects

Back to article view | Back to comp.lang.javascript

Contents

  Not able to obtain any form objects Dan Campbell <dcwhatthe@gmail.com> - 2018-12-31 15:42 -0800
    Re: Not able to obtain any form objects "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-01-01 13:02 +0100
    Re: Not able to obtain any form objects Julio Di Egidio <julio@diegidio.name> - 2019-01-01 04:12 -0800
      Re: Not able to obtain any form objects Dan Campbell <dcwhatthe@gmail.com> - 2019-01-02 06:37 -0800
      Re: Not able to obtain any form objects Dan Campbell <dcwhatthe@gmail.com> - 2019-01-02 14:14 -0800

#35940 — Not able to obtain any form objects

Hi,

I'm re-designing an upload form that had problems, but re-doing the upload part with javascript.

When the Javascript code is called, it doesn't seem to have access to any of the elements.  So for example, if this is near the top of the Javascript, the application_form is always null.  Same for any other elements.

var application_form = document.querySelector( '#id-fileinfo' ) ;


The html is here, the input form is for three separate uploads (a single file for each upload input):


<code>
<html>

<?php

error_reporting(E_ALL);
ini_set("display_errors", 1);

?>
<head>
    <script type = "text/javascript" src = "jquery-2.1.4.min.js"></script>
    <script src="simpleupload.js"></script>
    
</head>

<body>

<!--    <form method="post" enctype="multipart/form-data" onsubmit="return uploadtest()" name="nme-fileinfo" id="id-fileinfo" >   -->
    <form id="id-fileinfo" method="post" enctype="multipart/form-data" name="nme-fileinfo"  >   
        <label for="id-photo-id">Photo ID</label>
        <input type="file" name="nme-photo-id" id="id-photo-id" accept=".jpg, .png, .jpeg, .gif, .bmp, .pdf" />
        <br>
        <label for="id-application">Application</label>
        <input type="file" name="nme-application" id="id-application"  accept=".jpg, .png, .jpeg, .gif, .bmp, .pdf" />
        <br>
        <label for="id-photo">Photo</label>
        <input type="file" name="nme-photo" id="id-photo"  accept=".jpg, .png, .jpeg, .gif, .bmp, .pdf" />
        <br>

        <input type="submit" value="Upload" />
        <br>

        
    </form>

    
</body>



</html>


</code>



, and the simpleupload.js starts with this:


<code>
        debugger ;
        
        var application_form = document.querySelector( '#id-fileinfo' ) ;
        
        if (application_form !== null) 
        {
            alert( application_form ) ;
        }    

</code>


Regards,

DC

[toc] | [next] | [standalone]

#35941

Dan Campbell <dcwhatthe@gmail.com> wrote on 01 Jan 2019 in
comp.lang.javascript: 

> 
> Hi,
> 
> I'm re-designing an upload form that had problems, but re-doing the
> upload part with javascript. 
> 
> When the Javascript code is called, it doesn't seem to have access to
> any of the elements.  So for example, if this is near the top of the
> Javascript, the application_form is always null.  Same for any other
> elements. 
> 
> var application_form = document.querySelector( '#id-fileinfo' ) ;
> 
> 
> The html is here, the input form is for three separate uploads (a single
> file for each upload input): 
> 
> 
> <code>
> <html>
> 
> <?php
> 
> error_reporting(E_ALL);
> ini_set("display_errors", 1);
> 
> ?>
> <head>
>     <script type = "text/javascript" src =
>     "jquery-2.1.4.min.js"></script> <script
>     src="simpleupload.js"></script> 
>     
> </head>
> 
> <body>
> 
> <!--    <form method="post" enctype="multipart/form-data"
> onsubmit="return uploadtest()" name="nme-fileinfo" id="id-fileinfo" >  
> --> 
>     <form id="id-fileinfo" method="post" enctype="multipart/form-data"
>     name="nme-fileinfo"  >   
>         <label for="id-photo-id">Photo ID</label>
>         <input type="file" name="nme-photo-id" id="id-photo-id"
>         accept=".jpg, .png, .jpeg, .gif, .bmp, .pdf" /> <br>
>         <label for="id-application">Application</label>
>         <input type="file" name="nme-application" id="id-application" 
>         accept=".jpg, .png, .jpeg, .gif, .bmp, .pdf" /> <br>
>         <label for="id-photo">Photo</label>
>         <input type="file" name="nme-photo" id="id-photo"  accept=".jpg,
>         .png, .jpeg, .gif, .bmp, .pdf" /> <br>
> 
>         <input type="submit" value="Upload" />
>         <br>
> 
>         
>     </form>
> 
>     
> </body>
> 
> 
> 
> </html>
> 
> 
> </code>
> 
> 
> 
> , and the simpleupload.js starts with this:
> 
> 
> <code>
>         debugger ;
>         
>         var application_form = document.querySelector( '#id-fileinfo' )
>         ; 
>         
>         if (application_form !== null) 
>         {
>             alert( application_form ) ;
>         }    
> 
> </code>

Why make it simple while it can be made difficult?

However, the elemnt probably does not exists, 
when document.querySelector() is executed. 


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35942

On Tuesday, 1 January 2019 00:42:40 UTC+1, Dan Campbell  wrote:

> When the Javascript code is called, it doesn't seem to have access to any of
> the elements.

Scripts execute immediately when encountered by the html parser (unless they
are marked async: I won't get into that).

And your code is not wrapped in a function called e.g. on page load,
it just runs there and then.

Now notice that you include your scripts before those elements are encountered
in the document, so those elements indeed do not exist yet at that point.

All that said, an immediate fix, not to mention a best practice unless one
has solid reasons to do otherwise, is to include your scripts at the very
bottom of the page, just before the closing body tag.

HTH,

Julio

[toc] | [prev] | [next] | [standalone]

#35949

On Tuesday, January 1, 2019 at 7:12:49 AM UTC-5, Julio Di Egidio wrote:
> On Tuesday, 1 January 2019 00:42:40 UTC+1, Dan Campbell  wrote:
> 
> > When the Javascript code is called, it doesn't seem to have access to any of
> > the elements.
> 
> Scripts execute immediately when encountered by the html parser (unless they
> are marked async: I won't get into that).
> 
> And your code is not wrapped in a function called e.g. on page load,
> it just runs there and then.
> 
> Now notice that you include your scripts before those elements are encountered
> in the document, so those elements indeed do not exist yet at that point.
> 
> All that said, an immediate fix, not to mention a best practice unless one
> has solid reasons to do otherwise, is to include your scripts at the very
> bottom of the page, just before the closing body tag.
> 
> HTH,
> 
> Julio

Yeah, I did move it to the bottom of the page as well.  The variables get populated in that case, but doesn't contain the expected values.

Anyway, I'll go back to that setup, move it back to the bottom, and play with it for a little while.  Thanks, Julio.


Regards,

DC

[toc] | [prev] | [next] | [standalone]

#35950

On Tuesday, January 1, 2019 at 7:12:49 AM UTC-5, Julio Di Egidio wrote:
> On Tuesday, 1 January 2019 00:42:40 UTC+1, Dan Campbell  wrote:
> 
> > When the Javascript code is called, it doesn't seem to have access to any of
> > the elements.
> 
> Scripts execute immediately when encountered by the html parser (unless they
> are marked async: I won't get into that).
> 
> And your code is not wrapped in a function called e.g. on page load,
> it just runs there and then.
> 
> Now notice that you include your scripts before those elements are encountered
> in the document, so those elements indeed do not exist yet at that point.
> 
> All that said, an immediate fix, not to mention a best practice unless one
> has solid reasons to do otherwise, is to include your scripts at the very
> bottom of the page, just before the closing body tag.
> 
> HTH,
> 
> Julio

Ugh.  Forgot to throw in an Onclick event.  I had stripped out everything from a longer example, and got rid of anything that would run the actual code.

Anyway, after enclosing the script in a function and referencing it in the onclick event, it's working as expected.

Thanks, Julio and Evertjan.


Regards,

DC

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web