CODEWITHSUNDEEP
javascriptnotifications
karim shiro
karim shiro

Reputation: 85

notfication won't show up after form submission

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>

Upvotes: 0

Views: 37

Answers (1)

Cypherjac
Cypherjac

Reputation: 879

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

Upvotes: 1

Related Questions