CODEWITHSUNDEEP
javascripthtmldom
user2026794
user2026794

Reputation: 123

document.getElementByName Code works fine on Firefox but doesn't work on IE9

I was using this code fine on bothe IE9 and Firefox but now it works only on Firefox and it just doesn't execute Java validation part on IE9. Any idea what I may need to do to make it work on both type of browserss? Thanks

  <?php
   if(isset($_POST['submit'])) {
      $first_name=$_POST['fname'];
     echo 'Entered First Name = '.$first_name;
  }
  ?>
  <html>

  <form method="post" enctype="multipart/form-data" action="">
      <label for="fname"> First Name: </label> <input  type="text" name="fname"  /> <br /><br />
      <label for="file"> Select File: </label> <input  type="file" id="file" />
      <input type="submit" name="submit" value="Submit" />
  </form>

  <script>
  document.forms[0].addEventListener('submit', function( evt ) {
     var file = document.getElementById('file').files[0];

      if(file && file.size < 18000) { 
          //Submit form
         alert('Size is valid');
      } else {
         alert('pic too big');
         evt.preventDefault();
      }
  }, false);
  </script>
  </html>

Upvotes: 0

Views: 598

Answers (3)

SomeShinyObject
SomeShinyObject

Reputation: 7801

Combined with what Alex W said, your code also needs some tweaking. getElementsByName requires a name attribute from where you are trying to select. It returns a NodeList of elements with the name given in the function. .

Change your input to have a name attribute, then you won't even need that function:

<input type="file" name="file" /> id works just fine. See below.

I stand corrected by my own research. All the above is true about getElementsByName, however to retrieve the File object, you have to call it from an array returned by selecting a file input form type. As such, document.getElementById('file').files[0] should work. So will the method below:

window.onload = (function () {
    document.forms[0].addEventListener('submit', function (evt) {
        //this works
        var file = document.forms[0].file.files[0];
        //as does this
        file = document.getElementById('file').files[0];
        if (file && file.size < 18000) {
            //Submit form
            alert('Size is valid');
        } else {
            alert('pic too big');
            evt.preventDefault();
        }
    }, false);
});

jsFiddle

Even after all is said and done, it still will not work in browsers that do not support the HTML5 File API (looking at you IE).

Edit

Whoa, whoa, whoa hold the reigns? I just read that the id attribute was slated to replace the name attribute once IE6 gets nuked. Apparently this is old news1 2 3.

So I did some testing and it turns out id works just fine when calling the element the same way:

var file = document.forms[0].file;

Prove it? Ok

Upvotes: 1

Alex W
Alex W

Reputation: 38183

The fact that the files array does not exist is not due to a code error. Internet Explorer 9 and below do not support the HTML5 File API, so you will have to use a workaround such as uploading with a Java applet or Adobe Flash.

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

Looks like you have a script error.

The files property does not seems to be supported in IE9

document.forms[0].addEventListener('submit', function( evt ) {
    var f = document.getElementById('file');
    var file = f.files ? f.files[0] : f;

    if(file && file.size < 18000) { 
        //Submit form
        alert('Size is valid');
    } else {
        alert('pic too big');
        evt.preventDefault();
    }
}, false);

Demo: Fiddle

Upvotes: 0

Related Questions