Как получить данные без перезагрузки страницы?
Есть попап с формой регистрации, или авторизации и в зависимости от того, на какую кнопку нажмет пользователь - форма отрисуется нужным образом. нажатую кнопку я получаю тоже через форму, но проблема в том - что значение я получаю только после перезагрузки, как сделать так, чтобы я получал значение без перезагрузки
<!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>