Why does modal freezes on click of register button

Question

I have a registration form inside a modal. By default, it is hidden. On click of a button, the form shows. The issue now is, after filling the form and submit button is clicked its supposed to send a request via ajax to the server but it kind of freezes the page. If I open another tab and come back to it then it reloads the page.

I tried couple of test to see if the register button triggers the request by alerting a string say alert("hello"). It gets alerted after then it freezes.

This is the js code

//register
$("#reg-form").on("click", "#register", function (e) {
    e.preventDefault();
    alert(" clicked");
    let email = $("#email").val();

    let fname = $("#fname").val();
    let oname = $("#oname").val();
    let phone = $("#phone").val();
    let country = $("#country").val();
    alert(phone);
    $.ajax({
        url: "../../../../store/register",
        type: "post",

        data: {
            fname: fname,
            oname: oname,
            phone: phone,
            password: password,
            email: email,
            //register:'register'
        },
        //  dataType:'json',
        success: function (dt) {
            alert(dt);
        },
        
    }); //ajax
}); //register

The HTML form inside the modal is this..

  <!-- modal for registration-->
  <div style="display:none;" id="reg-modal" class="modal is-active">
    
    
  <div class="modal-background"></div>
  
  <div class="modal-card">
    <header class="modal-card-head">
      <p  class="button modal-card-title baseColor white ">Register </p>
      <button id="reg-close" class="button is-danger delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      
        
      <!-- Content ... -->
     
 
     <div class="notification is-light is-link">You are not currently logged in. Register quickly and access our features<hr><b>Ensure</b> you provide a working <b>phone number</b> and <b>email</b>
  </div>  
  
  
<div style="display:flex; flex-flow:row wrap;" class="columns is-mobilee box">
    
    <form id="reg-form" action="../../../store/register" method="post">
<div  class="column is-half-mobile is-three-quarters-desktop is-half-tablett">
   <div class="control has-icons-right">  
 <input id="email" class="input is-link " name="email" type="email" placeholder="Email..." required><span class="icon is-right baseColor white"><i class="fa fa-envelope"></i></span>
     </div>
     </div>
     
   <!--hhh-->  
     
   <div class="column is-half-mobile is-half-three-quarters-desktopp is-half-tablett">
   <div class="control has-icons-right">  
 <input id="phone" class="input is-link " name="phone" type="tel" placeholder="Phone No.." required><span class="icon is-right baseColor white"><i class="fa fa-phone"></i></span>
     </div>
     </div>
       
        <!--hhh-->  
     
   <div class="column is-half-mobile is-half-desktopp is-half-tablett">
   <div class="control has-icons-right">  
 <input id="fname" class="input is-link " name="fname" type="text" placeholder="Surname" required><span class="icon is-right baseColor white"><i class="fa fa-user-o"></i></span>
     </div>
     </div>
      
      
     <div class="column is-half-mobile is-three-quarters-desktopp is-half-tablett  has-icons-right">  
     <div class="control has-icons-right">
<input id="oname" class="input is-link " name="oname" type="text" placeholder="Other Names" required><span class="icon is-right baseColor white"><i class="fa fa-user"></i></span>
     </div>
     </div>   
     
     
         <div class="column is-half-mobile is-three-quarters-desktopp is-half-tablett  has-icons-right">  
     <div class="control has-icons-right">
<input id="password" class="input is-link " name="password" type="text" placeholder="Password" required><span class="icon is-right baseColor white"><i class="fa fa-key"></i></span>
     </div>
     </div>    
     
     
     
   <div class="select is-link"> 
 <select id="country" name="country">
    <option>COUNTRY</option>
    
    <option value="AU">Australia</option>
    
    <option value="BR">Brazil</option>
    <option value="CM">Cameroon</option>
    <option value="CI">Cote D'Ivoire</option>
    <option value="EG">Egypt</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="GH">Ghana</option>
    <option value="IN">India</option>
    <option value="IT">Italy</option>
    <option value="KE">Kenya</option>
    <option value="MX">Mexico</option>
    <option value="NG">Nigeria</option>
    <option value="PT">Portugal</option>
    <option value="ES">Spain</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
</select>      
     </div>
     
 </div>   <!--columns-->
 
 
       <input type="submit" name="register" id="register" class="button is-link is-rounded block mb-1" value="Register"> <span class="ml-2 fa fa-arrow-right"></span> 
    <!--  </button>  --> 
     
</div>

</div> < /form> < !--end of modal
  for registration -->

And finally the server side

function register() {
    //clean the data     
    function clean($data) {
        $data = trim($data);
        $data = htmlspecialchars($data);
        $data = htmlentities($data);
        return $data;
    }
    //if(isset($_POST['register'])){
    $email = clean($_POST['email']);
    $email = filter_var($email, FILTER_SANITIZE_EMAIL);
    $email = filter_var($email, FILTER_VALIDATE_EMAIL);
    if ($email == false) {
        echo "Please enter a valid email";
        exit;
    }
    $password = clean($_POST['password']);
    $password = filter_var($password, FILTER_SANITIZE_STRING);
    $password = password_hash($password, PASSWORD_DEFAULT);
    $fname = clean($_POST['fname']);
    $fname = filter_var($fname, FILTER_SANITIZE_STRING);
    $oname = clean($_POST['oname']);
    $oname = filter_var($oname, FILTER_SANITIZE_STRING);
    $phone = clean($_POST['phone']);
    $phone = filter_var($phone, FILTER_SANITIZE_STRING);
    $country = clean($_POST['country']);
    $country = filter_var($country, FILTER_SANITIZE_STRING);
    $datas = array($fname, $oname, $password, $country, $phone, $email);
    foreach($datas as $d) {
        if (strlen($d) < 1) {
            echo "You must not leave any field empty!!!";
            exit;
        } else {
            $test = "passed";
        }
    } //foreach
    if ($test == "passed") {
        //insert to db
        echo "1";
    }
    //  } //if    
} //func reg

Sorry I don't wish to type all this code to bother you but to make the question clear. If I remove the js and process the form , it works.

The button that displays the registration modal also work well.

I tried to select with

$(document).on('click','#register',function (){
......

Still the same result. Thanks for your help in advance.