How to stop an anchor from redirecting using JQuery

Question

How can I stop an anchor tag redirecting to another page if the user is not logged in? I have a function to check if the user is logged in or not. I want to do it with JQuery or JavaScript. Here is what I have tried so far but with no results:

<a href="www.somewhere.com" id="yes">Read More</a>

<script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function(){
            var id = $(this).attr('id');
            if(id == 'yes'){
                //i want to prevent
            }else{
                //redirect
            }
        });
    });
</script>

Authentication needs to be performed server-side in your PHP, not in JavaScript at all. — Greg, Jun 28 '12 at 08:38
@Greg, what do you mean by real? Ajax is technically originating from the server side, so there wont need to be any problems, if he uses sessions and ajax combined. am I wrong? (I'd like to know :) if so) — funerr, Jun 28 '12 at 08:42
I expect you have a typo in your code, you probably don't mean to have `$id` but rather `id` as the variable name in the first few lines — Billy Moon, Jun 28 '12 at 08:45
@agam360 Ajax is OK to be used in authentication procedures, but the authentication **must** occur on the server, not on the client like in this example. — Greg, Jun 28 '12 at 10:51

score 61 · Accepted Answer · edited Oct 30 '19 at 20:11

61

Please use http://api.jquery.com/event.preventDefault/

demo http://jsfiddle.net/aRBY4/6/

e.preventDefault()

quote

If this method is called, the default action of the event will not be triggered.

Also if I may suggest read this: .prop() vs .attr()

Hope this helps,

sample code

  $('a').click(function(event){
    event.preventDefault();
    //do whatever
  });

In your case please try this

$(document).ready(function() {
    $('a').click(function(event) {
        var id = $(this).attr('id');
        if (id == 'yes') {
            event.preventDefault();
            //i want to prevent
        } else {
            //redirect
        }
    });
});

edited Oct 30 '19 at 20:11

ezakto

3,174
22
27

answered Jun 28 '12 at 08:38

Tats_innit

33,991
10
71
77

i have used the same method you mentioned but it returns undefined on click if i alert id of anchor. – Ankit Jun 28 '12 at 08:42
@Ankit cool, so preventDefault aside, `:)` there is another issue with the selector which gets the `id` can you also paste your html in the question and I might help you out, cheers – Tats_innit Jun 28 '12 at 08:44
i was missing id as my page was showing same code for two cases , Thanks alot @Tats, problem resolved. – Ankit Jun 28 '12 at 08:49
one more Question. As i have prevented onclick of anchor tag i also want to stop open in new tab. – Ankit Jun 28 '12 at 10:20
Hiya @Ankit Stop opening tab: hmm either you can `return false` after `preventDefault` or use this API: http://api.jquery.com/stop/ worth thinking it through and asking a separate question `:)` just an idea if you cannot figure it out but above detail should help, – Tats_innit Jun 28 '12 at 10:23
i have used mousedown function on place of click function that does the work capture every click including open in new tab , open in new window , everything goes fine but when use open in new tab then alert comes as wanted but when i check the checkbox of prevent from generating message then again on click or on open in new tab or window anchor redirects. – Ankit Jun 28 '12 at 10:32
ola @Ankit again `:)` try replicating that in jsfiddle, I might take a look and +1 for your question from my end, oh and `:P` its bit late at my end hence worth making a decent demo and ask a separate question carefully, anyhoo just an idea. – Tats_innit Jun 28 '12 at 10:34

score 4 · Answer 2 · answered Jun 28 '12 at 08:38

4

Change your click event handler to this

$('a').click(function(e){
    var id = $(this).attr('id');
    if (id == 'yes')
    {
        e.preventDefault();
        e.stopPropagation();
    }
    else
    {
        //redirect
    }
});

answered Jun 28 '12 at 08:38

slash197

9,028
6
41
70

score 0 · Answer 3 · answered Mar 04 '20 at 07:19

0

try this one

    $("a").on("click",function(e){
         e.preventDefault();
         alert("Clicked");

     });

happy Coding;

answered Mar 04 '20 at 07:19

Adeel Ahmed Baloch

672
2
7
15

score -1 · Answer 4 · answered Jun 28 '12 at 08:55

Use event.preventDefault(). It is used to prevent the default action of the event.

<script type="text/javascript">
$(document).ready(function(){
      $('a').click(function(){
          var id = $(this).attr('id');
         if(id == 'yes'){
             event.preventDefault() 
         }else{
            //redirect
         }
     });
});
</script>

How to stop an anchor from redirecting using JQuery

4 Answers4

Linked

Related