How can i prevent ajax request from reloading page

Question

i have this ajax code which post data to by server side but reloads after upload successuful. i have attached my html code below. kindly help out here, thanks

function UploadVid(){
    var file = $("#inputVideo")[0].files[0];
    var formData = new FormData();
    formData.append("file1", file);

    $.ajax({
        url: 'http://localhost:3000/upload-video',
        method: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress",
                uploadProgressHandler,
                true
            );
            xhr.addEventListener("load", loadHandler, false);
            xhr.addEventListener("error", errorHandler, false);
            xhr.addEventListener("abort", abortHandler, false);
            console.log(xhr)
            return xhr;
        }
    });
}

//html code
 <div class="col-4 mt-2">
    <label class="col-12">Upload Video File</label>
    <button onclick="$('#inputVideo').trigger('click')"  class="btn btn-primary text-white">Upload</button>
    <input id="inputVideo" onchange="UploadVid(event)" accept="video/*" hidden class="d-none" type="file">
</div>

Answer 1

To fix this, and improve the quality of your code, remove the inline event handler and attach the event using an unobtrusive method to the form element containing the button. From there you can call preventDefault() on the event passed to your handler function as an argument to prevent the standard HTTP request caused by the form submission.

In addition, as suggested by @Christopher, add type="button" to the button so that it will not submit the form when you click it to select a file to upload.

Try this:

$('#yourForm').on('submit', e => {
  e.preventDefault();

  var file = $("#inputVideo")[0].files[0];
  var formData = new FormData();
  formData.append("file1", file);

  $.ajax({
    url: 'http://localhost:3000/upload-video',
    method: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgressHandler, true);
      xhr.addEventListener("load", loadHandler, false);
      xhr.addEventListener("error", errorHandler, false);
      xhr.addEventListener("abort", abortHandler, false);
      return xhr;
    }
  });
});

$('.upload-btn').on('click', () => {
  $('#inputVideo').trigger('click');
});

<div class="col-4 mt-2">
  <label class="col-12">Upload Video File</label>
  <button type="button" class="btn btn-primary text-white">Upload</button>
  <input type="file" id="inputVideo" hidden class="ulpoad-btn d-none" />
</div>