html: execute function when link clicked, get alert and then redirect to another page

Question

What's the best way to combine two strings

String 1:

<a href="javascript:myFunc();" onclick="alert('myFunc executed')">Click here</a>

and String 2:

<a href="http://google.com">click here</a>

so that: myFunc() executed; alert appears; once alert is clicked, the page is being redirected to http://google.com

I'm asking about the most correct way to do that.

Thank you.

Refer the link http://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event — , Feb 16 '15 at 12:42

score 5 · Answer 1 · answered Feb 17 '14 at 12:40

5

Use:

<a href="http://google.com" onclick="myFunc(); alert('myFunc executed'); return true">click here</a>

answered Feb 17 '14 at 12:40

Maksim Gladkov

3,051
1
14
16

I just wanted to trigger google analytics event when user clicks on any link. For my use case this approach was quite handy. – Chirag Purohit Jul 19 '22 at 08:26

BJ Safdie · Answer 2 · 2017-06-16T14:45:02.590

5

Your approach is very "obtrusive" JavaScript. Nowadays, folks tend to recommend an Unobtrusive JavaScript approach.

<a id="myLink" href="http://google.com" data-message="myFunc executed">Click Here</a>

Note that there is no JavaScript in the HTML.

Then, in your script module, you can initialize as below (I use jQuery for brevity):

$("#myLink").click(function(){
    var href = $(this).attr("href"),
        message = $(this).attr("data-message");
    myFunc();
    alert(message);
    window.location.href = href;
});

This technique leaves your HTML clean and allows you to perform multiple actions on the click event.

Finally, if you are not familiar with the concept of modules in JavaScript, take a look at Douglas Crockford's book JavaScript, The Good Parts.

edited Jun 16 '17 at 14:45

answered Feb 17 '14 at 13:30

BJ Safdie

3,399
23
23

1

small change.. it's `$("#myLink").click(function(){` :) – Yashrajsinh Jadeja Jun 16 '17 at 10:56
@Yashrajsinh Jadeja, Good catch. I edited to show your correction. Thanks. – BJ Safdie Jun 16 '17 at 14:45
This opens the link in same window... I would like the target be new window but not blocked by popup – Si8 Oct 23 '18 at 14:09

score 2 · Accepted Answer · answered Feb 17 '14 at 12:40

2

Try this :

<a href="javascript:void(0)" onclick="alert('myFunc executed');myFunc();window.location='http://google.com'">Click here</a>

explanation :

javascript:void(0) Is for u to see a link.

answered Feb 17 '14 at 12:40

Royi Namir

144,742
138
468
792

What if the target is a new window, but through javascript it's blocked by popup. – Si8 Oct 23 '18 at 14:08

html: execute function when link clicked, get alert and then redirect to another page

3 Answers3

Linked