javascript - Ajax form submission progress function failing? -

i'm submitting form via ajax , trying update simple progress bar while it's uploading. form submission works can't progress bar update or request loaded amount.

<form enctype="multipart/form-data">               <input name="file" type="file" />     <button>update account</button> </form> <progress value="0" max="100"></progress> 

jquery + ajax

$(document).on("submit", "form", function(){      var formdata = new formdata($('form')[0]);      $.ajax({         url: window.location.pathname,         type: 'post',         xhr: function() {             myxhr = $.ajaxsettings.xhr();             if(myxhr.upload){                 myxhr.upload.addeventlistener('progress', progresshandlingfunction, false);             }             return myxhr;         },         async:false,         data: formdata,         cache: false,         contenttype: false,         processdata: false     }); }); 

upon submitting form should run addeventlistener function run update progress:

function progresshandlingfunction(e){     if(e.lengthcomputable){         $("progress").attr('value', e.loaded);         $("progress").attr('max', e.total);     } } 

but functions inside myxhr.upload.addeventlistener(); not seem run?

myxhr.upload.addeventlistener('progress', alert("test"),  false); 

works fine, below not run, why happen?:

myxhr.upload.addeventlistener('progress', function(){alert("test")},  false); 

this example uses similar coding:

http://www.matlus.com/html5-file-upload-with-progress/

$(document).live("submit", "form", function(){ 

should be:

$(document).on("submit", "form", function(){ 

or better:

$("#static-container-id").on("submit", "form", function(){ 

if want use live (jquery < 1.4.4)

$("form").live("submit", function(){