Ajax image upload refreshing the page on mobile

Question

Hi I have a form that includes an Ajax image uploader, its working fine on desktop but when I try my mobile it causes the page to refresh after the image is selected and the image is lost (not to mention other bits of jquery I have set to run on complete of the upload).

I have found this link Android browser refreshes page after selecting file via input element and although it provides an explanation I can see there is no solution offered. That post was more than a year ago and I havent found any other solutions online.

There must be a workaround as I can see it working on other sites, e.g. http://www.putmeinthestory.com/

Code:

<form action="index.php?route=product/product/image_upload" onSubmit="return false" method="post" enctype="multipart/form-data" class="MyUploadForm">
    <input name="FileInput" id="FileInput" type="file" /><br />
    <input type="submit"  id="submit-btn" value="Upload File &raquo;" />
</form> 

<div id="output"></div> 

Javascript: Im not sure if posting all the functions being called below is relevant to the issue.

var options = {
    target:   '#output',   // target element(s) to be updated with server response
    beforeSubmit:  beforeSubmit,  // pre-submit callback
    success: afterSuccess,  // post-submit callback
    uploadProgress: OnProgress, //upload progress callback
    resetForm: true        // reset the form after successful submit
};

 jQuery('.MyUploadForm').submit(function() {
    $(this).ajaxSubmit(options);           
    return false;
});

Answer 1

I think I may have resolved it by changing the code a little... I removed the action from the form tag and included the url in the ajax instead.

Perhaps the issue isnt with Android after all. (Although Im still confused as to why the problem has been appearing on SO if thats the case.)

I dont want to give it a correct answer yet until I have confirmed it is working on various devices.

<form action="" onSubmit="return false" method="post" enctype="multipart/form-data" class="MyUploadForm">

var options = {
    url: 'index.php?route=product/product/image_upload',
    target:   '#output',   // target element(s) to be updated with server response
    beforeSubmit:  beforeSubmit,  // pre-submit callback
    success: afterSuccess,  // post-submit callback
    uploadProgress: OnProgress, //upload progress callback
    resetForm: true        // reset the form after successful submit
};