CODEWITHSUNDEEP
c#html
Anthony Fernandes
Anthony Fernandes

Reputation: 611

HTML automatically mapping href to root

I have an anchor tag with the href set as:

 <a href="$myfunction(param)$">; Click Here</a>

When I click on Click here, it redirects to http://mywebsite/$myfunction(1234). This page obviously does not exist. How do I ensure that clicking on the above link does not map to the root? I would like it to call the javascript function.

Note: I cannot do this:

<a href="javascript:$myfunction(param)$">Click Here</a>.

The reason is that we have a 3rd party crawler (no source code available) that searches for anchor tags on our page and picks up the href part for the link and fails if not found in the exact format $myfunction(param)$

Upvotes: 0

Views: 311

Answers (4)

tutacat
tutacat

Reputation: 99

You can use the 'onclick' attribute of the link tag instead of href, For example

<a onclick="function()">Website name</a>

To change the cursor and have a blue link, you may need a blank href also. Another option is to use <input type="button" value="Name">

<a href onclick="function()">Button</a>

In XHTML, it needs to have an empty string value "", or a "#"

<a href="" onclick="function()">Button</a>

Also, note that links or buttons that say "click here" or "here" are not descriptive. When you list the links, i.e. with a screen reader, you don't know what "here" means out of context.

Upvotes: 0

Fabian Gonzalez
Fabian Gonzalez

Reputation: 29

have you tried to invoke the onClick handler?

<a href="" onClick="myfunction(param)">; Click Here</a>

Another approach is the following

function MyFunction(param){
	alert(param);
}
(function() {
 var aElements = document.getElementsByTagName("a");
 var aList = Array.prototype.slice.call(aElements);
 aList.forEach(function(elem) {   
    var regex = /\$(.*?)\$/g;
  	var result =regex.exec(elem.href);
	if (result != undefined && result.length > 0) {
		elem.onclick= function(){
    //executes function
		eval(result[result.length-1]);
	   //prevents href action;
		return false;
	   }
   }
 });
})();
<a href="$MyFunction('hello')$">I have a function</a>
<br/>
<a href="#home">I have a normal link</a>
<br/>
<a href="$MyFunction('world')$">I have another function</a>

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89412

You can use the onClick event handler to call the function and prevent the default action of the link with event.preventDefault().

<a href="$myfunction(param)$" onclick="myfunction(event)"> Click Here</a>
<br/>
<a href="someaddress" onClick="function2()">Link that does NOT have its default action prevented</a>
<script>
function myfunction(e){
   e.preventDefault();
   console.log("Function myfunction() called");
}
function function2(){
   console.log("Function function2() called");
}
</script>

Upvotes: 1

Carlos Rivera
Carlos Rivera

Reputation: 166

HTML anchor link specification does not support adding a javascript function as the value of the href attribute. Per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a you should add an URL or an URL fragment.

If you need to add it this way you can add the onclick event to anchor like this:

<a href="$myfunction(param)$" onclick="myfunction(param)">; Click Here</a>

Then you just need to make sure you function returns false and/or calls event.preventDefault this is to avoid redirection.

Upvotes: 1

Related Questions