jQuery form plugin, how to prevent the form submit

Question

I am using the jQuery form plugin to upload a file and show the progress bar.

the JS code :

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

var options = { 
    target:     '.result', 
    url:        'slider_insert_now.php', 



    beforeSend: function() {


    var img_file = $.trim($(".img_file").val());

    if(img_file==$.trim('')){

    $(".result").html('<span class="error">No file selected</span>');


    return false; 

    }else{

    status.empty();
    var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);

    return true;
 }


},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}



}; 



$('#form_upload').ajaxForm(options);

And the HTML:

<div class="result"></div>


    <form id="form_upload" action="javascript:void(0)" method="POST" enctype="multipart/form-data">

    <div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>



    <input type="file" value="" name="img_file" class="img_file" />

    <br></br>

    <input type="submit" value="Upload the Image" />


    </form>

in the beforeSend function, I used return false to prevent the form from submitting itself. But it does not work . How can I achieve that?

Don't make your check inside beforeSend callback or then abort the request — A. Wolff, Mar 10 '14 at 12:27
have never used this plugin but they recommend validation to be done on beforeSubmit http://malsup.com/jquery/form/#options-object — Wilmer, Mar 10 '14 at 12:31
instead of returning false: `beforeSend: function(jqXHR) {` then `jqXHR.abort();` or better/easier, set your logic before setting request and do the request only if you need it, otherwise don't call request. Logic seems not that hard to understand — A. Wolff, Mar 10 '14 at 12:35
@A.Wolff, ' do the request only if you need it ' - that is not possible with `ajaxForm` , I think. `beforeSend` is for `ajaxSubmit`. But with `ajaxSubmit`, I found no way to show progress bar. — Istiaque Ahmed, Mar 10 '14 at 12:38
@A.Wolff, `jqXHR.abort();` method worked. I would like to accept your response as the answer. Can you mention where or how you got the solution in your answer? — Istiaque Ahmed, Mar 10 '14 at 12:43

score 0 · Answer 1 · answered Mar 10 '14 at 12:37

0

In your html remove javascript:void(0) and put # instead, and use event.preventDefault(); where ever you trigger submit. Something like this:

$(document).on('click', '#submitname', function (event) {
 event.preventDefault();
  $.ajax({
    url: 'somepage.php',
    type: 'post',
    dataType:'html',   
    data: $('#formname').serialize(),
    success: function(response, textStatus, jqXHR){

     ///Do something

},
   error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
   }
 });
});

answered Mar 10 '14 at 12:37

Tomek

100
2
8

Can that upload a file ? – Istiaque Ahmed Mar 10 '14 at 12:39
A jquery plugin is always necessary to upload a file without going to another page or an iframe can do, right ? I asked about a particular jQuery plugin. – Istiaque Ahmed Mar 10 '14 at 12:45

score 0 · Answer 2 · answered Mar 10 '14 at 12:46

To abort a current 'in run' request, you need to abort it ;) Inside beforeSend callback, the first parameter is the jqXHR object:

beforeSend: function(jqXHR) {
    //some other code to check if we need to abort current request, if so...
    jqXHR.abort();
}

jQuery form plugin, how to prevent the form submit

2 Answers2