Ajax validation duplicates html page inside html element

Question

My PHP username validation with Ajax duplicates my html page inside of html div(this is for showing ajax error) element. I tried some solutions and google it bu can't find anything else for solution. Maybe the problem is about the $_POST but I also separated them in php (all the inputs validation).

Here is PHP code

<?php 

if(isset($_POST['username'])){
    //username validation
    $username = $_POST['username'];

    if (! $user->isValidUsername($username)){
        $infoun[] = 'Your username has at least 6 alphanumeric characters';
    } else {
        $stmt = $db->prepare('SELECT username FROM members WHERE username = :username');
        $stmt->execute(array(':username' => $username));
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (! empty($row['username'])){
            $errorun[] = 'This username is already in use';
        }
    }
}


if(isset($_POST['fullname'])){
    //fullname validation
    $fullname = $_POST['fullname'];

    if (! $user->isValidFullname($fullname)){
        $infofn[] = 'Your name must be alphabetical characters';
    }   
}

if(isset($_POST['password'])){
    if (strlen($_POST['password']) < 6){
        $warningpw[] = 'Your password must be at least 6 characters long';
    }   
}

if(isset($_POST['email'])){
    //email validation
    $email = htmlspecialchars_decode($_POST['email'], ENT_QUOTES);
    if (! filter_var($email, FILTER_VALIDATE_EMAIL)){
        $warningm[] = 'Please enter a valid email address';
    } else {
        $stmt = $db->prepare('SELECT email FROM members WHERE email = :email');
        $stmt->execute(array(':email' => $email));
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (! empty($row['email'])){
            $errorm[] = 'This email is already in use';
        }
    }
}

?>

Here is Javascript

<script type="text/javascript">
    $(document).ready(function(){
        
        $("#username").keyup(function(event){
        event.preventDefault();
        var username = $(this).val().trim();
        if(username.length >= 3){
            $.ajax({
                url: 'register.php',
                type: 'post',
                data: {username:username},
                success: function(response){
                // Show response
                $("#uname_response").html(response);
                }
            });
        }else{
            $("#uname_response").html("");
        }

        });     

    });
</script>

<input type="text" name="username" id="username" class="form-control form-control-user" placeholder="Kullanıcı Adınız" value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="2" required>

<div id="uname_response" ></div>

Here is the screenshot:

form duplicate screenshot

Answer 1

The only code in your PHP file should be within the <?php?> tags. You need to seperate your PHP code into another file.