Why is the message not working and the page is reloading?

Question

PHP

index.php

<?php include 'User.php'; ?>

    <form method="post" class="mt-2">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Name">
        </div>
        <div class="form-group">
            <input type="text" name="surname" class="form-control" placeholder="Surname">
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control" aria-describedby="emailHelp" placeholder="Email">
        </div>
        <div class="form-group">
            <input type="text" name="phone" class="form-control" placeholder="Phone Number">
        </div>
        <div class="form-group">
            <input type="password" name="password" class="form-control" placeholder="Password">
        </div>
        <div class="form-group">
            <input type="password" name="reTypePassword" class="form-control" placeholder="Re-Type Password">
        </div>
        <button id="sign-up" type="submit" name="signUp" class="btn btn-primary btn-block">Sign Up</button>
    </form>
    
    <script>
        $(document).on('click', '#sign-up', function(){
            {
                $.ajax({
                    url:<?php
                    $user = new User();
                    if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['signUp'])) {
                        $userRegistration = $user->userRegistration($_POST);
                    }
                    ?>,
                   
                    method:"POST",
                    dataType:"text",
                    success:function(){
                        alert(<?= $userRegistration ?>);
                    }
                });
            }
        });
    </script>

user.php

<?php
include 'Database.php';

include_once 'Session.php';

class User
{
    private $db;

    public function __construct()
    {
        $this->db = new Database();
    }

    public function userRegistration($data)
    {
        $name = htmlspecialchars($data['name']);
        $surname = htmlspecialchars($data['surname']);
        $email = htmlspecialchars($data['email']);
        $password = htmlspecialchars($data['password']);
        $reTypePassword = htmlspecialchars($data['reTypePassword']);
        $phone = htmlspecialchars($data['phone']);
        $chk_email = $this->emailCheck($email);
        
        if ($name == "" || $surname == "" || $email == "" || $password == "" || $phone == "") {
            $message = "<div class='alert alert-danger'>բոլոր դաշտերը պետք է լինեն լրացված:</div>";
            return $message;
        }

        if (strlen($surname) < 3) {
            $message = "<div class='alert alert-danger'>օգտագործողի անունը պետք է լինի բաղկացած առնվազն 3 տառից:</div>";
            return $message;
        } elseif (preg_match('/[^a-z0-9_-]+/i', $surname)) {
            $message = "<div class='alert alert-danger'>Օգտագործողի անունը պետք է պարունակի միայն տառեր, թվեր կամ գիծ:</div>";
            return $message;
        }

        if(!is_numeric($phone)){
            $message = "<div class='alert alert-danger'>Հեռախոսահմարը պետք է պարունակի պարունակի միայն թվեր:</div>";
            return $message;
        }

        if($password !== $reTypePassword){
            $message = "<div class='alert alert-danger'>Գաղտնաբարերը չեն համընկնում:</div>";
            return $message;
        }

        if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
            $message = "<div class='alert alert-danger'>Էլեկտրոնային հացեն հիմնավոր չէ:</div>";
            return $message;
        }
        if ($chk_email == true) {
            $message = "<div class='alert alert-danger'>Էլեկտրոնային հացեն արդեն զբաղված է:</div>";
            return $message;
        }

        $sql = "INSERT INTO users(name, surname, email, password, phone) VALUES(:name, :surname, :email, :password, :phone)";
        $query = $this->db->pdo->prepare($sql);
        $query->bindValue(':name', $name);
        $query->bindValue(':surname', $surname);
        $query->bindValue(':email', $email);
        $query->bindValue(':password', $password);
        $query->bindValue(':phone', $phone);
        $result = $query->execute();

        if ($result) {
            $message = "<div class='alert alert-success'>Շնորհակալություն, դուք գրանցվեցիք Color School կայքում:</div>";
            return $message;
        } else {
            $message = "<div class='alert alert-danger'>կներեք, առաջացավ խնդիրներ ձեր տվյալները տեղադրելուց:</div>";
            return $message;
        }
    }



    public function emailCheck($email)
    {
        $sql = "SELECT email FROM users WHERE email = :email";
        $query = $this->db->pdo->prepare($sql);
        $query->bindValue(':email', $email);
        $query->execute();
        if ($query->rowCount() > 0) {
            return true;
        } else {
            return false;
        }
    }
}

Answer 1

Why... the page is reloading?

Because form submit is triggered.
If you want to process it using js - https://developer.mozilla.org/ru/docs/Web/API/Even...
PS It's more correct to catch not only a button click, but also Enter in inputs. That is, you need to catch form.submit, not button.click.

Answer 2

In your ajax url parameter, nothing is returned from PHP. Specify the URL where the request should be sent to. Something like well, or how your URL is formed there, it is not clear from this code. And in the emailCheck method, you most likely need to do

if ($query->rowCount() > 0) {
            echo json_encode(['status' => 'error']);
        } else {
            echo json_encode(['status' => 'success']);
        }

and in ajax check the response like this

success:function(answer){
    if(answer.status == 'success') alert('Логин свободен для регистрации');
    else alert('Данный логин уже занят');
}

and in the data parameter you need to pass the value of the email field, and not what you are trying to pass.

Answer 3

Gentlemen programmers, why did you directly pounce on a person?
Add at the end of the JS function or to cancel the form submission. return false;preventDefault();