Question

I’m submitting a form silently i.e without page refresh using jquery.submit() method. When user selects a file and click upload button upload starts and cancel button is enabled. But i don’t know how to cancel this upload in between. Official jquery documentation says

“we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler” ,but i didn’t understand how to use this in my case.
Below is the code i’m using to submit the form.

$('#button').click(function() {
    $('#form').submit();
});

Answer 1

I think there’s some confusion about how the jquery .submit() method is used. From the jquery docs:

The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to elements. Forms can
be submitted either by clicking an explicit <input type="submit">,
<input type="image">, or <button type="submit">, or by pressing Enter
when certain form elements have focus.

What this means is that all this method does is actually handle the submit event of a form. If you cancel the event, then your file upload is cancelled. There is no inbetween. You are either allowing the file to be uploaded, or you are cancelling the form submit (the upload) entirely. Also, to use .preventDefault(), it would look like this:

$('#button').click(function() {
    $('#form').submit();
});

$('#form').submit(function(e) {
    e.preventDefault();
    // could also use return false; as a previous poster 
    // suggested but I have found e.preventDefault() to be more reliable
});

You may need to look into some 3rd party plugins to accomplish what you are trying to do. One such plugin is Uploadify.