I am trying to make a demo involving an html input file uploader and ajax, but I can't even get my script to getElementById.

I keep receiving an TypeError: form is null.

Here is my html and script:

<form id="file-form" action="handler.php" enctype="multipart/form-data" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

<script type="text/javascript">
    var form = document.getElementById("file-form");
    var fileSelect = document.getElementById("file-select");
    var uploadButton = document.getElementById("upload-button");

form.onsubmit = function (event) {
    event.preventDefault();

    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
}
</script>

Note that 'fileSelect' and 'uploadButton' are receiving their elements and are not null.

For some reason form is not able to getElement.

I've seen several similar questions, but it seems like I am doing the right thing. Let me know if you have any suggestions.

Thanks in advance.

EDIT: I should add that this demo is in an ASP .ascx User Control Form. kami-sama's Code Snippet worked perfectly fine, but it will not do the same in my solution.

I log the 'form' variable after getElementById and it returns null and does not proceed past the form.onsubmit = function(event) line.

I am trying to make a demo involving an html input file uploader and ajax, but I can't even get my script to getElementById.

I keep receiving an TypeError: form is null.

Here is my html and script:

<form id="file-form" action="handler.php" enctype="multipart/form-data" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

<script type="text/javascript">
    var form = document.getElementById("file-form");
    var fileSelect = document.getElementById("file-select");
    var uploadButton = document.getElementById("upload-button");

form.onsubmit = function (event) {
    event.preventDefault();

    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
}
</script>

Note that 'fileSelect' and 'uploadButton' are receiving their elements and are not null.

For some reason form is not able to getElement.

I've seen several similar questions, but it seems like I am doing the right thing. Let me know if you have any suggestions.

Thanks in advance.

EDIT: I should add that this demo is in an ASP .ascx User Control Form. kami-sama's Code Snippet worked perfectly fine, but it will not do the same in my solution.

I log the 'form' variable after getElementById and it returns null and does not proceed past the form.onsubmit = function(event) line.

• javascript
• jquery
• html
• ascx

• 2 Aren't you missing a closing bracket (}) for the onsubmit function? – Glorfindel Commented Jun 16, 2015 at 13:46
• yes I am @Glorfindel. Fortunately, that exists in my source. thanks anyway. – terbubbs Commented Jun 16, 2015 at 13:52

2 Answers 2

You should declare that your form will be handling uploaded files by adding the enctype="multipart/form-data"

w3 w3schools

I just added closing bracket to your code and it's working just fine in StackOverflow code snippet and in Firefox with html file.

var form = document.getElementById("file-form");
var fileSelect = document.getElementById("file-select");
var uploadButton = document.getElementById("upload-button");

form.onsubmit = function (event) {
    event.preventDefault();

    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
}

<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>