Problem with file submission via ajax into an iframe

[eluser]m4rw3r[/eluser]
I'm trying to submit a form with a file upload in it via ajax.

It's not going so well (I'm getting a bit pissed at the different browsers), but I've got it to work partially in Firefox and Safari (two clicks).

The code below is partially borrowed from phpletter's jQuery plugin, but I needed to be able to send both a file and fields at the same time.

Here is the JS (may be messy):

Code:

bind_ajax_to_share_forms = function(){
        $('#image_form button').click(function(){
            // create a clone of the form to submit
            var orig_form = $(this).parent().parent().parent();
            var form = $(orig_form).clone();
            var tab = $(orig_form).parent();
            //$(orig_form).hide(slow);
            
            var frameId = 'image_frame';
            
            // add form to body
            $(form).css('position', 'absolute');
            // move them
            $(form).css('top', '0px');
            $(form).css('left', '0px');
            $(form).appendTo('body');
            
            // create iframe
            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                // just remove '+' because it's because I want to avoid the [removed] texts
                io.src = 'java'+'script:false';
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            
            // move iframe
            io.style.top = '0px';
            io.style.left = '0px';

            document.body.appendChild(io);
            
            $(form).attr('method', 'POST');
            $(form).attr('target', frameId);
            if(form.encoding)
            {
                form.encoding = 'multipart/form-data';                
            }
            else
            {                
                form.enctype = 'multipart/form-data';
            }
            
            
            $(form).submit();
            
            var uploadCallback = function(){
                var io = document.getElementById(frameId);
                var xml = {};
                try
                {
                    if(io.contentWindow)
                    {
                         xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body[removed]:null;
                         xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
                        
                    }else if(io.contentDocument)
                    {
                         xml.responseText = io.contentDocument.body. innerHTML;
                    }
                }catch(e)
                {
                    //alert(e);
                }
                
                $(tab).html(xml.responseText ? xml.responseText : 'No Response from server');
                
                // comment the two lines below to make it work half in FF
                $(form).remove();
                $(io).remove();
                
                bind_ajax_to_share_forms();
            }
            
            if(window.attachEvent){
                document.getElementById(frameId).attachEvent('onload', uploadCallback);
            }
            else{
                document.getElementById(frameId).addEventListener('load', uploadCallback, false);
            }
            
            return false;
        });
     }

The problem is that in Firefox and safari (where this code "almost" work), the cloned form appears to the left.
Then the onload event occurs for about:blank, causing the callback to be triggered.
This makes the form disappear after the original have been replaced with the "No Response" text.
But if you comment the remove() calls, it will work partially.

Everything goes like before, but the copied form stays, which you then can submit and the onload triggers as it should.

What am I doing wrong? Phpletter's plugin seems to work, and my code is almost identical in the sections that matter.

Thanks in advance.

[eluser]m4rw3r[/eluser]
Ok, I think I got the problem solved:

I need to get the JS to click the form button instead of submitting the form.

Code:

/// replace:
$(form).submit();
// with:
$('button',form).click();

It seems to work in both IE, Firefox, Chrome and Safari.
But Opera still thinks I want to have the content of about:blank.