i wrote a simple html page in order to test JavaScript notification API but for some reason when i want to submit the form to trigger the notification, it wont appear and the browser keeps asking me permission to allow notification, can someone tell me why the notification doesn't appear?
the code is as follows:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testing notification</title>
</head>
<body>
<form id="myform" name="meForm" method="post" action="#">
<input type="text" name="para"><br>
<input type="text" name="para2"><br>
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvales</option>
<option value="Los Angeles, CA">Los-Angeles</option>
<option value="Mountain View, CA">Mountain Views</option>
<option value="">China</option>
<option>Australia</option>
</select><br>
<input type="submit" name="submitButton" id="sub">
</form>
<script type="text/javascript" >
const form=document.querySelector("#myform");
Notification.requestPermission().then((permission)=>{
console.log('the permission is ' , permission)
});
form.addEventListener("submit", (event)=>{
//event.preventDefault()
let not=new Notification("hey",{
body:"you submitted the form successfully"});
setTimeout(()=>{
not.close()},5000)
});
</script>
</body>
</html>
Mozilla Docs on Notification API
This feature is only available in secure contexts, so you have to test it on a domain with https enabled
But your code is just fine and should work as expected