jquery multipart form submission prevention

Question

jquery form submission prevention using e.preventDefault() is not working in multipart form submission ( when im using ajax to submit ). Is there any way to solve it ?

Code

$('.imgChange').submit( function(e){
    load('do_upload.php',$(this).serialize());
    e.preventDefault();
});

possible duplicate of [jQuery - how to submit a \`post\` \`multipart/form-data\` from a form and get your function called?](http://stackoverflow.com/questions/7924157/jquery-how-to-submit-a-post-multipart-form-data-from-a-form-and-get-your-f) — Fardin K., Jul 13 '13 at 10:33

Abhilash · Answer 1 · 2012-11-16T08:59:14.880

This should work on multipart form also

HTML

<form id="form-id" action="/UploadFile" enctype="multipart/form-data" method="post">
    <input type="submit" value="Submit" />
</form>

jQuery

$('#form-id').submit( function(e){
    e.preventDefault();
    alert('submit prevented');
    // rest of the code here
});

As long as you do not have anything else overriding this like an onsubmit, there is no reason for .preventDefault() to not work on multipart forms

Here's a jsbin

Arjun Raj · Accepted Answer · 2013-07-26T21:16:24.647

Using normal jQuery library it is not possible sent multipart form using ajax. There are many other plugin for that.

I recommend jQuery Form Plugin

it is very easy to use. Only you have to do is import that plugin after jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>

then use

$(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });

jquery multipart form submission prevention

2 Answers2