no158
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();retu rn false;"
2. href="#null" onclick="MyFunction();retu rn false;"
3. href="NoJavaScriptAbility. htm" onclick="MyFunction();retu rn 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:MyFunctio n();"
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
I have an interesting problem.
I have this link that looks like this:
<a href="goesToPage.aspx" onclick="return trackingLink(this);">Click
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=
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();retu
2. href="#null" onclick="MyFunction();retu
3. href="NoJavaScriptAbility.
4. href="#" onclick="return MyFunction();"
5. href="javascript:;" onclick="return MyFunction();"
6. href="javascript://" onclick="return MyFunction();"
7. href="javascript:void(0);"
8. href="javascript:MyFunctio
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
<a href="http://www.google.ca/search" onclick="trackingLink(this
-> http://www.google.ca/search?q=HainKurt
<a href="http://www.google.ca/search?a=b" onclick="trackingLink(this
-> http://www.google.ca/search?a=b&q=HainKurt
<a href="http://www.google.ca/search?a=b&q=Hain" onclick="trackingLink(this
-> http://www.google.ca/search?a=b&q=Hain
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>
<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
<a href="http://www.google.ca/search?a=b" onclick="trackingLink(this
<a href="http://www.google.ca/search?a=b&q=Hain" onclick="trackingLink(this
oopsie, sorry HainKurt I got mixed up with who was asking the question
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?
Any ideas why this would happen?
ASKER
The only way I can get the function call to fire first is to do one of these steps:
1. href="#" onclick="MyFunction();retu rn false;"
2. href="#null" onclick="MyFunction();retu rn false;"
3. href="NoJavaScriptAbility. htm" onclick="MyFunction();retu rn 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:MyFunctio n();"
1. href="#" onclick="MyFunction();retu
2. href="#null" onclick="MyFunction();retu
3. href="NoJavaScriptAbility.
4. href="#" onclick="return MyFunction();"
5. href="javascript:;" onclick="return MyFunction();"
6. href="javascript://" onclick="return MyFunction();"
7. href="javascript:void(0);"
8. href="javascript:MyFunctio
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?
This dosn't make any sense to me.
Any thoughts why this could be?
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.
Thank you both.
ty for points
ASKER
Your welcome, both of you supported the idea that it should work.
Thanks again.
Thanks again.
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