[FIXED] How to avoid move_uploaded_file() refresh the page on button click

Issue

I am using $.ajax({}) of jQuery, I am trying to move the uploaded file in folder on click. The upload came successful but my problem is when uploading, the page is refreshing I already tried e.preventDefault() and <button type="button">

This is my html code

<input type="file" id="student-img-file" accept="image/*" name="student-img-file">
<button type="button" id="btn-submit-form" class="mt-4">Submit Form</button>

This is my jQuery code

$('button#btn-submit-form').on('click', function(e){
    let formData = new FormData()
    formData.append('student-img-data', $('#student-img-file').prop('files')[0])
    
    $.ajax({
        url: '../PHPFunctions/AdmissionFormFunction.php',
        method: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        cache: false,
        success: function(result){
            console.log(result)
        }
    })
})

this is my PHP(AdmissionFormFunction.php) code

$studentImgData = $_FILES['student-img-data'];

if(move_uploaded_file($studentImgData['tmp_name'], '../FileUploads/' . $studentImgData['name'])){
    echo "YESSSSSSSSSSSS";
}

I am not using form tags by the way

Solution

I just turned off my vs code live server. I forgot that any changes that i've made in my folder system in vs code will refresh the page.

Answered By - Kroi

Answer Checked By - Mary Flores (PHPFixing Volunteer)