Wrong form submission code

[soreman]

Hello,

My main form (where the file upload input field is located) is intercepted with the following code: $('#myaccount').live('submit', function() { $.ajax({ data: $(this).serialize(), type: $(this).attr('method'), url: $(this).attr('action'), success: function(response) { $('.ui-tabs-panel:visible').html(response); } }); return false; })

This causes a problem with the ajaxFileUpload plugin as its form submission get intercepted as well (for some reason), althouth the id of its form is not #myaccount and when the upload form is submitted it gets submitted not to its defined action but rather it gets submitted to the above code, which causes the submitted form to be empty since jquery does not support multipart forms. In this case the upload form in the iframe does not get submitted at all.

If I change the id of my form to something else the upload script works fine as the interception code above did not intercept the main form.

[jfeldstein]

http://stackoverflow.com/questions/379610/can-you-nest-html-forms

Since forms can't be nested, I guess you can't use this plugin inside an existing form. Bummer.

I'll see about working up a fix soon. In the meantime, try moving the outside your

's boundaries.

[vnp123]

Hi Jordan Feldstein,

I am having same problem do you know when you can able to fix this issue.

In my case my form and its elements are dynamically generated. It is very hard to move out file elements from the form because I referring elements based on form id and I have to generate multiple instances of these dynamic form.

Please help me I stuck here.

Thanks vnp123

[jfeldstein]

My day job has been eating up all my extra time the last two weeks, which is why I haven't been able to reply.

I think the event is bubbling up from the form used to upload the file, until its received and handled by your callback. I haven't had a chance to test this or build a fix yet. You can try calling .stopPropagation() or .preventDefault() on the event inside the plugin, to stop it from escaping into the rest of the page.

Or you can try using https://github.com/valums/file-uploader which works a little differently, but also has some neat features.

~ J

(via phone) On Jan 2, 2012 5:39 PM, "vnp123" < [email protected]> wrote:

Hi Jordan Feldstein,

I am having same problem do you know when you can able to fix this issue.

In my case my form and its elements are dynamically generated. It is very hard to move out file elements from the form because I referring elements based on form id and I have to generate these dynamic forms up to 10.

Please help me I stuck here.

Thanks vnp123

---

Reply to this email directly or view it on GitHub:

https://github.com/jfeldstein/jQuery.AjaxFileUpload.js/issues/4#issuecomment-3335564

[vnp123]

Hi jfieldstein,

I am back again. I was busy with other stuff. Basically I treid above appraoch suggested by you but this was not working.

I have impleneted this way // let onStart have the option to cancel the upload if(ret !== false) { if (jQuery().validate) { $element.parent('form').validate({ onsubmit: false }); } //alert($($element).parent().parent().html()); //$element.parent('form').preventDefault(); $element.parent('form').submit( function(event){ event.stopPropagation(); }

            );

I used stopPropagation event on submit event when submiting the form. But it is not working.

Could you please suggest me any other appraoches, I can work with you to fix this issue so that others are also benefied. I can move file element out side of the form but that is not ideal.

This is one of the very good plugin I have seen that's why I wanted to fix this issue.

I am waiting for your reply.

Thanks vnp123

[jfeldstein]

http://stackoverflow.com/questions/379610/can-you-nest-html-forms

^ Forms cannot be nested in HTML. It will not work. This plugin is designed for standalone file uploads, not uploads that are wrapped inside other forms.

You could try putting the outside of the

and positioning it absolutely, so it looks like it's wherever you want it to be.