jquery 3.1.0 with ajax form

Question

I want to do a progress bar to my image upload form and I'm using jquery 3.1.0 and jquery-form.

but i got this message

$(...).ajaxForm is not a function

here is my code :

$(document).ready(function() {

  $('form').ajaxForm({
    beforeSend: function() {
      $('#progress-bar').width('0%')
    },
    uploadProgress: function(event, position, total, percentComplete) {
      $('#progress-bar').width(percentComplete + '%');
      $('#status').html(percentComplete + '%')
    },
    complete: function() {
      console.log("done");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>

<form action="..." method="POST" enctype="multipart/form-data">
  <input type="file" name="banner_photo" id="banner_photo">
  <div class="progress">
    <div id="progress-bar" class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
      <div id="status"></div>
    </div>
  </div>
  <input type="submit" value="Ajouter" class="btn btn-success">
</form>

Answer 1

This is because $('form') returns a list of forms, even if there is only one.

Give your form an id, and use $('#yourFormId') instead.

Alternatively you could do something like that :

$("form").each(function(index){
  $(this).ajaxForm({...})
});