Javascript staying on a page after clicking on a link

Question

I have a question , this is my code :

<a href="Webshop.php" class="Button" onclick="myFunction()">Webshop</a>

<script>
    function myFunction() {
        var r = confirm("If you leave this page your purchase will be gone!");
        if (r == true) {
            window.location = "http://www.titansafes.sgr15.g-o.be/Webshop.php";
        } else {
            return
        }
    }
</script>

If you click on the button I get the alert , if they click ok , they direct back to the webshop , if they click cancel , they need to stay on the page. But how can I do that best? I tried Window.location ( doesn't work ), return doesn't work , and it's quite important for me.

And then read this: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — Vinay, Jan 16 '14 at 07:59

score 2 · Accepted Answer · answered Jan 16 '14 at 08:03

2

<a href="Webshop.php" class="Button" onclick="myFunction();return false;">Webshop</a>

<script>
    function myFunction() {
        var r = confirm("If you leave this page your purchase will be gone!");
 if (r == true) {
            window.location = "http://www.titansafes.sgr15.g-o.be/Webshop.php";
        } else {
        }
    }
</script>

answered Jan 16 '14 at 08:03

Shn

368
2
10

Thank you for this answer , the event didn't work but this did :D – Bondjens Jan 16 '14 at 08:10
you can remove href="Webshop.php" and add javascript:void(0); or # – Shn Jan 16 '14 at 08:12

score 0 · Answer 2 · answered Jan 16 '14 at 07:59

0

<a href="javascript:void(0)" class="Button" onclick="myFunction()">Webshop</a>

answered Jan 16 '14 at 07:59

Vova Bilyachat

18,765
4
55
80

score 0 · Answer 3 · answered Jan 16 '14 at 08:00

`<a href="Webshop.php" class="Button" onclick="myFunction()">Webshop</a>
<script>
function myFunction(event)
{
 event.preventDefault();
var r=confirm("If you leave this page your purchase will be gone!");
if (r==true)
{
window.location ="http://www.titansafes.sgr15.g-o.be/Webshop.php";
}

}
</script>`

score 0 · Answer 4 · answered Jan 16 '14 at 08:14

It's better not to use return false; but instead in the event handler function call the preventDefault method on the event object argument that is being passed to it. The event object is the single argument that's passed to every event handler function. Two important methods on it are the preventDefault, which stop the default event action (in this case the navigation, as it's a link. The second important method is the stopPropagation which will stop the event from being triggered on parent elements. Using return falsewill actually do both, which isn't nesecerally what you want, it's important to know when to use what: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

So your handler should look something like this (adding the preventDefault):

function myFunction(eventObject) {
    eventObject.preventDefault();
    var r=confirm("If you leave this page your purchase will be gone!");
    if (r==true) {
        window.location ="http://www.titansafes.sgr15.g-o.be/Webshop.php";
    }
}

Also, as a side note, try to avoid inline events like: onclick="CODE" instead use the: element.addEventListener() method and it's IE8 and older alternatives. http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Javascript staying on a page after clicking on a link

4 Answers4