Subscribe to geohhot's Blog        RSS Feed
-----

Making form automatically submit when file is selected

22 December 2012
Icon Leave Comment
Tags: html, form
Posted by geohhot 
Actually I get answer when wrote post in DIC, now I wanted to post about it in my blog.
Whatever what I did is:
  • Wrote simple html
  • Added jquery
  • And finally wrote JS code which will make all work

First step: Writing simple html

Just simple html code with <input type="file" />
<html>
<head>
</head>
<body>
  <form id="form" method="POST" action="upload.php">
    <input  id="file_input" type="file" name="uploadedFile" />
  </form>
</head>
</body>
</html>

Second step: adding jquery

We will use this source as jQuery src file. Just will add this code in head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>

Third step: adding main script

For that we will add this part of code:
<script type="text/javascript">
$(function() {
  var input = document.getElementById("file_input");
  input.addEventListener("change", submit);

  function submit() {
    document.forms["form"].submit();
  }
});
</script>

This part acutaly just adds event listener for changing of file selecting. I tried making this with only jQuery, like:
$('#file_input').change(function() { $('#form').submit(); } );

But that haven't worked, so I found this way easy. So good luck with that!
Note: I have attached file with all source code.
Attached File  index.html (511bytes)
Number of downloads: 17

Categories: tutorial

Back to geohhot's Blog →

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

← January 2022 →

S M T W T F S
      1
2345678
9101112131415
161718192021 22
23242526272829
3031     

Recent Entries

Search My Blog

1 user(s) viewing

1 Guests
0 member(s)
0 anonymous member(s)