Action on user leaving the page

Question

In my HTML code, I want to show only to link buttons to either register or login and then, if the user is not interested in either and decides to close the page, I want to ask him whether he would be interested in viewing the listings (via maybe a dialogue box) and then if he clicks "yes", to go to the listings page.

So, I decided to make the listings link button invisible at the beginning and make it visible in the function myFunction, which should be invoked when the page closes or refreshes (another problem) via the onbeforeunload .

The problem that even though this works, the dialogue box that appears has this standard line that says "the page is asking you to confirm that you want to leave. data entered might not be safe." instead of what I type after return. For some, reason, I'm not allowed to post questions yet, so please bear with me. This seems to be the default content. How do this? Also, is there a better way?

Here is my HTML code:

`    <!DOCTYPE HTML>
<html>
<head>

        <link rel="stylesheet" type="text/css" href="CSS/a.css">

</head>


<body onbeforeunload="return myFunction()">
        <h3>Click the appropriate button</h3>
        <div>
                <a href="Reg.html"><button style="background-color:red; color:white;">Register</button></a> <br><br>
                <a href="Login.html"><button style="background-color:red; color:white;">Login</button></a> <br><br>
                <a href="Listings.html"><button class="hidden" id='marketing' style="background-color:green; color:white;">View Listings</button>
        </div>
<script>
        function myFunction() {
                document.getElementById('marketing').style.display='block';
                return "Do you want to view listings without registering?";

}
</script>

</body>
</html>`

And my CSS code:

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.hidden{
        display:none;
}





  [1]: https://i.stack.imgur.com/Q1a9W.png

Answer 1

I forgot what to write, i just ripped it here and there from w3schools

Just enjoy

 function myFunction() { var txt; var r = confirm("Press a button!\\nEither OK or Cancel.\\nThe button you pressed will be displayed in the result window."); if (r == true) { window.location.href = "https://stackoverflow.com/" } else { txt = "You pressed Cancel!"; } document.getElementById("demo").innerHTML = txt; }

 <h3>Click the appropriate button</h3> <div> <a href="Reg.html"><button style="background-color:red; color:white;">Register</button></a> <br><br> <a href="Login.html"><button style="background-color:red; color:white;">Login</button></a> <br><br> <button id='marketing' onclick="myFunction()" style="background-color:green; color:white;">View Listings</button> </div> <p id="demo"> </p>

Action on user leaving the page

Question

1 answers

solution1
0 2017-11-12 12:21:08

Action on user leaving the page

Question

1 answers

solution1 0 2017-11-12 12:21:08

solution1
0 2017-11-12 12:21:08