title: jQuery to submit form on file selection not working
body: <p>I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.</p>
  
  <p>So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?</p>
  
  <p>This is the JS</p>
  
  <pre><code>&lt;script&gt;
  $(function(){
      $("#file_select").change(function(){
          $(this).parents("#upload_form").submit();
          $("#upload_form_div").hide();
          $("#loading").show();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and the HTML</p>
  
  <pre><code>    &lt;div class="float_left" id="upload_form_div"&gt; 
          &lt;h3&gt;Select a picture for your profile (4 MB max):&lt;/h3&gt; 
          &lt;form action="http://example.com/profile/upload_picture" 
              id="upload_form" 
              enctype="multipart/form-data" 
              method="post" accept-charset="utf-8"&gt;
  
              &lt;input type="file" name="userfile" 
                     id="file_select" /&gt; 
               &lt;input type="hidden" name="upload" value="upload" /&gt; 
  
           &lt;button id="submit" type="submit"&gt;&lt;img height="24" width="24"
                     alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png"&gt; 
                      &lt;span&gt;Upload&lt;/span&gt; 
                &lt;/button&gt; 
          &lt;/form&gt;
  
          &lt;form action="http://example.com/profile/remove_picture" 
                method="post" accept-charset="utf-8"&gt;
          &lt;button type="submit"&gt;&lt;img height="24" width="24" 
               alt="Remove" src="images/icons/small/white/trashcan.png"&gt; 
              &lt;span&gt;Remove&lt;/span&gt; 
          &lt;/button&gt; 
          &lt;/form&gt;
  &lt;/div&gt; 
    &lt;div id="loading" style="display:none;"&gt; 
           Uploading your picture...
     &lt;/div&gt;
  </code></pre>