페이지를 새로 고치지 않고 성공 응답 텍스트와 함께 AJAX & PHP로 양식 제출

이것이 내 첫 번째 질문이며 올바르게하고 있기를 바랍니다.
저는이 "코딩 세계"의 초보자이며 여기에있는 답변을 사용하여 이미 약간의 진전을 이루었습니다!

오늘 저는 AJAX 및 PHP를 통한 양식 제출에 문제가 있습니다. AJAX 부분을 생략하면. 삽입 양식은 훌륭하게 작동하고해야 할 일을 수행하지만 AJAX로 제출하려고 할 때 아무것도 수행하지 않고 페이지를 새로 고칩니다. AJAX를 사용하여 페이지 새로 고침없이 HTML 부분에 오류 div를 설정하고 싶습니다.

사용 된 코드는 다음과 같습니다.

HTML :

<form class="form" action="../actions/insertUser.php" method="post" id="createUserForm">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label>Gebruikersnaam</label>
                        <input 
                        class="form-control"
                        id="userGebruikersnaam" 
                        type="text" 
                        name="userGebruikersnaam" 
                        placeholder="JODO"
                        value=""
                        maxlength="4"
                        pattern="[A-Za-z]{4}"
                        title="Maximaal 4 letters"
                        required>
                        <div id="form-info"></div>
                        <small class="small-form-text">Eerste 2 karakters Voornaam &amp; Eerste 2 karakters Achternaam<hr></small>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label>Voornaam</label>
                        <input 
                        class="form-control"
                        id="userVoorNaam" 
                        type="text" 
                        name="userVoorNaam" 
                        placeholder="John" 
                        value=""
                        required>
                        <div id="form-info"></div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label>Achternaam</label>
                        <input 
                        class="form-control"
                        id="userNaam" 
                        type="text" 
                        name="userNaam"
                        placeholder="Doe" 
                        value=""
                        required>
                        <div id="form-info"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label>Email</label>
                        <input 
                        class="form-control"
                        id="userMail"
                        type="email" 
                        name="userMail"
                        placeholder="[email protected]" 
                        value=""
                        maxlength="50"
                        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                        title="Controleer het opgegeven Emailadres"
                        required>
                        <div id="form-info"></div>
                    </div>
                </div>
            </div>
            <div class="row" style="width:60%">
                <div class="col-md-4">
                    <label for="userGender">Geslacht:</label>
                </div> 
                <div class="col-md-3 genderRadio">
                    <div class="form-group">
                        <label>
                            <input type="radio" id="userGender" name="userGender" value="man" required>
                                Man
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3 genderRadio">
                    <div class="form-group">
                            <label>
                            <input type="radio" id="userGender" name="userGender" value="vrouw" required>
                                Vrouw
                            </label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <label for="userAfdeling">Afdeling:</label>
                </div>
                <div class="col-md-6">
                    <select class="form-control form-control-sm" name="userAfdeling" id="userAfdeling" required>
                        <option value=""></option>
                        <option value="Administratie">Administratie</option>
                            <option value="After-Sales">After-Sales</option>
                            <option value="Carrosserie">Carrosserie</option>
                            <option value="Sales">Sales</option>
                            <option value="Tweedehands">Tweedehands</option>
                    </select>
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-2">
                    <label for="userRole">Machtiging:</label>
                </div>
                <div class="col-md-6">
                    <select class="form-control form-control-sm" name="userRole" id="userRole" required>
                        <option value=""></option>
                        <option value="gebruiker">Gebruiker</option>
                            <option value="admin">Admin</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col d-flex justify-content-end">
                    <button class="btn btn-primary" type="submit" name="createUser" id="submit_btn" value=""><i class="fas fa-fw fa-user-plus"></i> Creëer
                    </button>

                </div>
            </div>
        </div>
    </div>
</form>

PHP :

if (isset($_POST['createUser'])) {

    $userGebruikersnaam = strtoupper($_POST['userGebruikersnaam']);
    $userVoorNaam       = htmlspecialchars(ucwords($_POST['userVoorNaam'])); 
    $userNaam           = htmlspecialchars(ucwords($_POST['userNaam']));
    $userMail           = filter_var($_POST['userMail'], FILTER_SANITIZE_EMAIL);
    $userGender         = htmlspecialchars($_POST['userGender']);
    $userAfdeling       = htmlspecialchars($_POST['userAfdeling']);
    $userRole           = htmlspecialchars($_POST['userRole']);
    $userActief         = 0;
    $userCreateDate     = date("Y-m-d");
    /*Random Wachtwoord met Hash*/
    $wachtwoord = randomPassword();
        $optie = ['cost' => 11];
    /*HashedWachtwoord*/
    $userWachtwoord = password_hash($wachtwoord, PASSWORD_DEFAULT, $optie);

    $sql_user = "SELECT * FROM gebruikers WHERE gebruikersnaam ='$userGebruikersnaam'";
    $sql_email = "SELECT * FROM gebruikers WHERE email='$userMail'";
    $res_user = mysqli_query($con, $sql_user);
    $res_email = mysqli_query($con, $sql_email);

    if (mysqli_num_rows($res_user) > 0 ) {
        http_response_code(400);
            echo "Gebruiker bestaat al!";
    } elseif (mysqli_num_rows($res_email) > 0 ) {
            http_response_code(400);
            echo "Email bestaat al!";
        } else{
           // Prepare an insert statement
                $sql = "INSERT INTO gebruikers (gebruikersnaam, email, role, voornaam, naam, actief, 
                wachtwoord, gender, afdeling, datumCreatie) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
                if($stmt = $con->prepare($sql)){
                    // Bind variables to the prepared statement as parameters
                    $stmt->bind_param("sssssissss", $userGebruikersnaam, $userMail, $userRole, 
                     $userVoorNaam, $userNaam, $userActief, $userWachtwoord, $userGender, 
                     $userAfdeling, $userCreateDate);
                     $stmt->execute(); 
                     http_response_code(200);
                    echo "Records inserted successfully.";
                    // Close statement
                    $stmt->close();
                } else {
                    http_response_code(400);
                    echo "ERROR: Could not prepare query: $sql. " . $mysqli->error;
            }   
        }
    }
 ?>

jQuery :

$(function() {
    // 'Get' het reset formulier.
    //Aanpassing voor insertUser
    var form = $('#createUserForm');
    //Aanpassing voor insertUser
    var formMessages = $('#form-info'); //-->extra div voor text
    var formInputUser = $('#userGebruikersnaam');
    var formInputEmail = $('#userMail');

    // Opzetten van event listener voor het formulier
    $(form).submit(function(e) {
        // Voorkomen dat de browser het formulier verzend.
        e.preventDefault();

        // Serialiseren van de formulier data.
        var formData = $(form).serialize();

        // Verzenden van formulier met AJAX.
        $.ajax({
            type: 'POST',
            //url: $(form).attr('action'),
            url:"../actions/insertUser.php",
            data: formData
        })
        .done(function(response) {
            // Als het gekoppelde PHP script succesvol is box-succes en succes class toevoegen aan
            // formMessages(DIV #form-info) & formInputPass (INPUT #email)
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');
            $(formInputUser).removeClass('box-error');
            $(formInputUser).addClass('box-succes');
            $(formInputEmail).removeClass('box-error');
            $(formInputEmail).addClass('box-succes');

            // Zetten van antwoord tekst uit het php script.
            $(formMessages).text(response);

            // Formulier leegmaken.
            $('#userGebruikersnaam').val('');
            $('#userMail').val('');
            //window.location.replace("http://stackoverflow.com");
            setTimeout(function(){ window.location.replace("https://www.patrick-smets-group.be/dashboard2/admin/createUser.php");}, 2500);
        })
        .fail(function(data) {
            // Als het gekoppelde PHP script faalt box-error en error class toevoegen aan
            // formMessages(DIV #form-info) & formInputPass (INPUT #email)
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');
            $(formInputUser).removeClass('box-succes');
            $(formInputUser).addClass('box-error');
            $(formInputEmail).removeClass('box-succes');
            $(formInputEmail).addClass('box-error');


            // Zetten van antwoord tekst uit het php script.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! Er liep iets mis, probeer het nogmaals.');
            }
        });
    });
});