Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
getssionjquery.php
session.php
//getssionjquery.php
<!DOCTYPE html>
<html>
<head>
<title>How to get PHP Session Value in jQuery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<?php session_start(); ?>
<div class="container">
<h1 class="page-header text-center">How to get PHP Session Value in jQuery</h1>
<div class="row">
<div class="col-6">
<h3>Set Session Value</h3>
<form method="POST" action="session.php">
<input type="text" name="session_value" class="form-control" placeholder="Input Value" required>
<div style="margin-top:10px;">
<button type="submit" class="btn btn-primary">Set Value</button> <a href="unset.php" type="button" class="btn btn-danger">Unset Value</a>
</div>
</form>
<button type="button" id="checkSession" class="btn btn-info" style="margin-top:30px;">Check Session in jQuery</button>
</div>
</div>
<input type="hidden" value="<?php
if(isset($_SESSION['value'])){
echo $_SESSION['value'];
}
?>" id="session">
</div>
<script>
$(document).ready(function(){
//check session
$('#checkSession').click(function(){
var session = $('#session').val();
if(session == ''){
alert('Session not Set');
console.log('Session not Set');
}
else{
alert('Current Session Value: '+session);
console.log(session);
}
});
});
</script>
</body>
</html>
//session.php
<?php
session_start();
$session_value=$_POST['session_value'];
$_SESSION['value']=$session_value;
header('location:getsessionjquery.php');
?>
unset.php
//unset.php
<?php
session_start();
unset($_SESSION['value']);
header('location:getsessionjquery.php');
?>
