Как получить данные без перезагрузки страницы?

Есть попап с формой регистрации, или авторизации и в зависимости от того, на какую кнопку нажмет пользователь - форма отрисуется нужным образом. нажатую кнопку я получаю тоже через форму, но проблема в том - что значение я получаю только после перезагрузки, как сделать так, чтобы я получал значение без перезагрузки

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tests</title>
    <link rel="stylesheet" href="./css/style.css">
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
</head>
<body>
    <div class="header">
        <div class="nav-bar">
            <ul class="nav-list">
                <li>Home</li>
                <li>
                    Portfolio
                    <ul>
                        <li>Web Design</li>
                        <li>Web Development</li>
                        <li>Illustrations</li>
                    </ul>
                </li>
                <li>About</li>
                <li>Blog</li>
                <?php
                
                    if(!isset($_SESSION['username'])){
                       
                        echo'<li>';
                        echo'Join Us';
                        echo'<ul>';
                        echo '<form method="POST">';
                        echo'<li class="last popup_open"><button name="signIn">Sign In</button></li>';
                        echo'<li class="last popup_open"><button name="signUp">Sign Up</button></li>';
                        echo "</form>";
                        echo'</ul>';  
                        echo'</li>';
                       
                    }
                    else{
                        echo'<li>';
                        echo $_SESSION['username'];
                        echo'<ul>';
                        echo' <li class="last">Personal cabinet</li>';
                        echo' <li class="last">Settings</li>';
                        echo' <li class="last">Log Out</li>';
                        echo'</ul>';
                        echo'</li>';
                    }
                ?>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <div class='popup'>
            <form class="form " id="form" method="POST">
                <div class="form__group">
                    <button class="popup_close">close</button>
                </div>
                
                    <?php 
                    var_dump($_POST);
                        if(array_key_exists('signUp',$_POST))
                        {   
                            unset($_POST);
                            echo '<div class="form__group">';
                            echo '<input type="text" placeholder="Username" class="form__input" name="username" />';
                            echo '</div>';
                            echo '<div class="form__group">';
                            echo '<input type="email" placeholder="Email" class="form__input" name="userlogin" />';
                            echo '</div>';

                            echo '<div class="form__group">';
                            echo '<input type="password" placeholder="Password" class="form__input" name="userpassword" />';
                            echo '</div>';
                        }

                        else if(array_key_exists('signIn',$_POST)){
                            unset($_POST);
                            echo '<div class="form__group">';
                            echo '<input type="text" placeholder="User Login" class="form__input" name="userlogin" />';
                            echo '</div>';
                            echo '<div class="form__group">';
                            echo '<input type="text" placeholder="User Password" class="form__input" name="userpassword" />';
                            echo '</div>';
                        }
                    
                    ?>

                <button class="btn" type="button">Register</button>
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function(){
        //$('.red').css('background','url([url]http://mirgif.com/6/45.gif)');
            $('.popup_open').click(function(){
            $('.popup').css('visibility' ,'visible');
            $('.popup').css('opacity','1');
            })
        }); 
        $(document).ready(function(){
        //$('.red').css('background','url([url]http://mirgif.com/6/45.gif)');
        $('.popup_close').click(function(){
            $('.popup').css('visibility' ,'hidden');
            $('.popup').css('opacity','0');
            })
        });
</script>
</body>
</html>

Ответы (0 шт):