How to take parameters from form using ajax and pass to php class?

Question

PHP

index.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:'User.php
                    method:"POST",
                    dataType:"text"
                });
            }
        });
    </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()
    {
        $name = $_GET['name'];
        $surname = $_GET['surname'];
        $email = $_GET['email'];
        $password =$_GET['password'];
        $reTypePassword = $_GET['reTypePassword'];
        $phone = $_GET['phone'];
        
        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;
        }

        $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;
        }
    }
}

Answer 1

$(document).on('submit', 'form', function(event){
  event.preventDefault();
  $.ajax({
    url:'User.php',
    method:"POST",
    data: $("form").serialize(),
    dataType:"text"
  });
});

But you have the wrong value in the url parameter. Apparently, some kind of router is used, and the URL will be different, definitely not User.php. Possibly '/user/registration'

Answer 2

$(document).on('submit', 'form', function () {
...
}