Javascript non-redirect

Question

How to stop a HTML page from redirecting using Javascript when the user clicks a link if a condition is false/true? To be specific, the link is something like this:

<a href = "something.html">
<li class ="num" id="day1" onclick = "return checkDate(1)"></li>
<li class ="num" id="day2" onclick = "return checkDate(2)"></li>
<li class ="num" id="day3" onclick = "return checkDate(3)"></li> 
</a>

In my javascript file, I'll have something like:

Function checkdate(a){
if(a = 3){ don't redirect }

}

Just I don't know what to put to and all the google results for the problem are confusing. Thanks in advance.

@WesleyMurch -- All OP's `li` tags are inside an anchor – tymeJV Jun 14 '13 at 18:16 — tymeJV, Jun 14 '13 at 18:16
@WesleyMurch -- I also wouldn't capitalize `Function` :) – tymeJV Jun 14 '13 at 18:20 — tymeJV, Jun 14 '13 at 18:20

score 1 · Answer 1 · answered Jun 14 '13 at 18:15

1

function checkdate(a){
if(a == 3){ return false; }

}

answered Jun 14 '13 at 18:15

vusan

5,221
4
46
81

The reason why this works is explained here: http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event – terite Jun 14 '13 at 18:25

score 1 · Answer 2 · answered Jun 14 '13 at 18:19

1

Try this:

function checkdate( a ) {
    // block
    if ( a == 3 )
       return false;

    // your code to redirect if a != 3
}

answered Jun 14 '13 at 18:19

Guilherme Soares

11
2

score 0 · Answer 3 · answered Jun 14 '13 at 18:23

A couple of things. First, your markup is invalid. <li> tags need a <ul> or <ol> parent. Also, you're declaring a Function. JavaScript is VERY case sensitive, you'll need to declare this as function. I would modify your HTML to:

<li class ="num" id="day1" onclick = "checkDate(1)"></li>
<li class ="num" id="day2" onclick = "checkDate(2)"></li>
<li class ="num" id="day3" onclick = "checkDate(3)"></li>

JS:

function checkdate(a){
    if (!a == 3) {
        //redirect
    }

    return false;
}

score 0 · Answer 4 · answered Jun 14 '13 at 18:23

I could suggest something here using an onUnload event, but I think the simpler solution here is to have the actual "linking" code be in the <li>'s onclick event. I'm not quite sure if the other suggestions here work - you will "cancel" the onclick event for the <li>, but not for the <a>.

Here's my try. If you're using JQuery or something, there are other ways you can shorten it.

function gotoSomething(num) {
    if (checkdate(num)) {
        window.location = "something.html";
    }
}

HTML:

<a href = "#">
<li class ="num" id="day1" onclick = "gotoSomething(1)"></li>
<li class ="num" id="day2" onclick = "gotoSomething(2)"></li>
<li class ="num" id="day3" onclick = "gotoSomething(3)"></li> 
</a>

Hm. If "return false" worked for other people, then I obviously did something wrong in my test - when I put that in, it wasn't preventing the link. I guess this one can be ignored. — Katana314, Jun 14 '13 at 18:24

Javascript non-redirect

4 Answers4