Use a link ONLY when javascript is disabled

Question

I have a social networking site for my college community and its working fine. There is a feature to like a post by other users. Liking is triggered using javascript's onClick() function.

Recently due to security reasons, many of our members disabled javascript.

Is there any way to redirect a user to a particular page if javascript is disabled? Otherwise the script should work.

For a more discriptive detail, assume my current code is like:

<a href="#" onclick="return likeFunction();">Item</a>

what i want is something like:

<a href="www.mysite.com/postController/likeAction" onclick="return likeFunction();">Like</a>

**but href should be active only if onclick() function dont work. is that possible? **

my site is built with php codeigniter. any solutions?

Add the correct link in every `` tag, and in your JS, use `preventDefault()` to override the href — WillardSolutions, Nov 20 '18 at 15:39
donno much with javascript. but guess tags may be helpfull. lemme research and will let you know if i could help — Rishad, Nov 20 '18 at 15:39
Going off of what @WillardSolutions mentioned, you can also add `return false` in your function to override. — Spencer Wieczorek, Nov 20 '18 at 15:43
onclick is a very old fashioned way of attaching event handlers to HTML elements. It's vastly preferable to add them programmatically with addEventListener (or a framework that wraps it). By the way, this isn't a PHP question. Please don't mistag questions. — GordonM, Nov 20 '18 at 17:57

randomdev7u81 · Answer 1 · 2018-11-20T16:07:35.713

Just return false on the function that is called in the onClick event. So either make sure that likeFunction() returns false. Or, return false afterwards with onClick="likeFunction(); return false;".

In general, you should always put a link in the href and not rely exclusively on JS. An anchor tag should not be abused with the onclick event to create pseudo-buttons. You might consider using a button tag if no link has to be put in the href.

Also, the href should start with the protocol (http://www.example.com instead of www.example.com).

Side note: You might consider attaching the JS event by calling addEventListener instead of using the onClick attribute. There are different cons and pros using either methods. I suggest you to have a look at this answer: addEventListener vs onclick.

Edit: As WillardSolutions suggested, you can use preventDefault to ensure the link is not opened when the onClick event is called. For further details, I suggest you to have a look at this answer: event.preventDefault() vs. return false

CD001 · Answer 2 · 2018-11-20T16:22:43.433

Don't muddy up your HTML, simply enhance it with JavaScript (see: Progressive Enhancement). This can be easily achieved with a CSS class and a document selector.

Given the HTML:

<a href="/postController/likeAction" class="like">Like</a>

You can add a self executing JavaScript function just before the </body> tag:

<script>
(function() {
    document.querySelectorAll('a.like').forEach(function(item) {
        item.removeAttribute('href');
        item.onclick = function() {
            /* add the likeFunction functionality here */
        };
    });
})();
</script>

That's pretty basic; it loops through all <a> tags that have class="like", removes the href attribute and adds the functionality from your current likeFunction() to the click event (if you copy the code from the likeFunction() to where indicated).

Obviously if JavaScript is disabled, the DOM isn't updated and your original HTML remains in place.

Note: forEach() support may be sketchy in Microsoft browsers.

Mohd Abdul Mujib · Answer 3 · 2018-11-21T15:50:30.073

1

Why not just use preventDefault()

// if js is disabled, this doesn't execute at all, 
// so the link will work by default and take the user to the url defined inside the `href` tag.
document.getElementById('myLink').addEventListener('click', function(e) {
   e.preventDefault(); // This will tell the browser not to follow the link.

    ... Do Awesome stuff here all day long

});

DEMO

edited Nov 21 '18 at 15:50

answered Nov 20 '18 at 16:50

Mohd Abdul Mujib

13,071
8
64
88

Use a link ONLY when javascript is disabled

3 Answers3