Iframe Post Form - submitting the html form on the change of the input field

Question

I have a very simple html form:

<form enctype="multipart/form-data" method="POST" action="fileupload" id="image-upload-form" target="iframe-post-form">
    <input type="file" name="file" id="file-to-upload">
    <input type="submit" value="upload" id="image-upload-submit">
</form>

I am using Iframe Post Form library to submit my images.

When I am using the following jquery, it works perfectly:

$(document).ready(function(){
    $('#image-upload-form').iframePostForm({
        post : function() {
           $("#progress-indicator").show();
        },
        complete : function (response) {
        $("#progress-indicator").hide();
            try {
                json = $.parseJSON(response);
            } catch (e) {}
         }
     });
});

Now, I would like to eliminate the submit button, while the page should submit images automatically immediately after selecting a file. I am a beginner in jquery and jscript and I must be doing some trivial mistake, but I cannot figure it out, why almost the identical code does not work for me. Here is the faulty code (I can see in firebug, that my breakpoints inside of that code are getting hit, but images are not submitted any more):

$(function() {
    $('#file-to-upload').bind('change', function(event) {
        $('#image-upload-form').iframePostForm({
            post : function() {
                $("#progress-indicator").show();
            },
            complete : function (response) {
                $("#progress-indicator").hide();
                try {
                    json = $.parseJSON(response);
                } catch (e) {}
            }
        });
   });
});

I would appreciate your help very much.

SOLUTION:

After receiving @Huangism suggestion, I finally found a solution. I post it in case somebody would need to resolve same problem:

$(function() {
    $('#file-to-upload').bind('change', function(event) {
        $('#image-upload-form').submit().iframePostForm({
            post : function() {
                $("#progress-indicator").show();
            },
            complete : function (response) {
               $("#progress-indicator").hide();
               try {
                   json = $.parseJSON(response);                    
               } catch (e) {}
            }
        });
    });
});

Answer 1

I have never used iframe post form lib but the initial working code looks like it is setting up the listeners on document ready, in your code, you put the set up inside of the change function of file-to-upload. So basically every time file-to-load changes, it will setup the whole post form thing every time.

You need to call the submit function of the form on change. I am not too sure what post form lib does and i don't know your whole code structure so I can't really suggest anything else. But the problem with your code is you put the set up of the post form in the wrong place