asked on

href and onclick

Hello experts,

I have an interesting problem.

I have this link that looks like this:
<a href="goesToPage.aspx" onclick="return trackingLink(this);">Click Me</a>

The trackingLink function basically pulls the querystring values from the url and parses it to only pick out a particular value for a key, for example the url looks similar to this:
http://www.domainName.com/subPage/page.aspx?id=1&tracking=someValue
The function will use the key "tracking" and spit out the value "someValue".

Here is the main problem, I need to have the href value be the link "goesToPage.aspx" so that the javaScript code will pull the value of the href in order to do a simple if statement saying if there is a value for the key "tracking" then I need to append "?tracking=someValue" to the link so that when the href fires it will goto the page "goesToPage.aspx?tracking=someValue".

The problem I'm facing is trying to fire the javaScript function before the href while maintaining a way to capture the link information from the <a> tag so that I can append the querystring to it.

I've done some looking around and most people say you need to set your href equal to:
1. href="#" onclick="MyFunction();return false;"
2. href="#null" onclick="MyFunction();return false;"
3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;"
4. href="#" onclick="return MyFunction();"
5. href="javascript:;" onclick="return MyFunction();"
6. href="javascript://" onclick="return MyFunction();"
7. href="javascript:void(0);" onclick="return MyFunction();"
8. href="javascript:MyFunction();"
In order to fire the onclick before the href, but in my case I need to find another solution. Unless there is another attribute within <a> that allows me to hold the link value for later use. I'm just not sure what the best course of action would be for this issue.

Any guidance would be much appreciated.
Neil

ASKER CERTIFIED SOLUTION

GwynforWeb

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

<a href="some url" onClick="return myFunction()">

should work, if your function returns false, a link does not do anything, if it returns true, a is clicked and page request url in href

SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

when used with

<a href="http://www.google.ca/search" onclick="trackingLink(this, 'HainKurt');">Click Me</a>
-> http://www.google.ca/search?q=HainKurt

<a href="http://www.google.ca/search?a=b" onclick="trackingLink(this, 'HainKurt');">Click Me</a>
-> http://www.google.ca/search?a=b&q=HainKurt

<a href="http://www.google.ca/search?a=b&q=Hain" onclick="trackingLink(this, 'HainKurt');">Click Me</a>
-> http://www.google.ca/search?a=b&q=Hain

GwynforWeb

I ran this and all worked fine?

<script>
function trackingLink(l, q){
if (l.href.indexOf("?") == -1) {
l.href += "?q=" + q;
}
else if(l.href.indexOf("&q=") == -1) l.href=l.href+"&q=" + q;
}
</script>

<a href="http://www.google.ca/search" onclick="trackingLink(this, 'HainKurt');">Click Me Test 1</a><p>

<a href="http://www.google.ca/search?a=b" onclick="trackingLink(this, 'HainKurt');">Click Me Test 2</a><p>

<a href="http://www.google.ca/search?a=b&q=Hain" onclick="trackingLink(this, 'HainKurt');">Click Me Test 3</a>

GwynforWeb

oopsie, sorry HainKurt I got mixed up with who was asking the question

no158

ASKER

This is so odd, href is always firing before the function is. I just did a simple function call with an alert in the function and it always goes to the href first.

Any ideas why this would happen?

no158

ASKER

The only way I can get the function call to fire first is to do one of these steps:

1. href="#" onclick="MyFunction();return false;"
2. href="#null" onclick="MyFunction();return false;"
3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;"
4. href="#" onclick="return MyFunction();"
5. href="javascript:;" onclick="return MyFunction();"
6. href="javascript://" onclick="return MyFunction();"
7. href="javascript:void(0);" onclick="return MyFunction();"
8. href="javascript:MyFunction();"

no158

ASKER

Narrowed it down, the onclick function wont fire first unless the function contains no arguments.

This dosn't make any sense to me.

Any thoughts why this could be?

no158

ASKER

Got it, I was using double quots for a string as an argument. Changed it to single quotes and problem is now solved.

Thank you both.

GwynforWeb

ty for points

no158

ASKER

Your welcome, both of you supported the idea that it should work.

Thanks again.