How to pass parameter with a href and onclick function

Question

I want to pass parameter when I click in <a href> , first I have this and works fine:

    <a href="#" rel="like{{num}}"> I like </a>|

   $("a[rel^='like']").click(function(){
            $.ajax({
                ...
            });

but I don't know how to pass parameter to that function, so I do this:

    <a href="#" rel="like{{num}}"
          onclick="cap(para1, para2)"> I like </a>

Finally, in my Javascript I have this simple function:

    function cap(para1, para2){
        alert('here');
    }

but I obtain this error:

ReferenceError: cap is not defined

Any idea?

Answer 1

A solution is to use data attributes :

<a href="#" rel="like{{num}}" data-para1="Oh"  data-para2="{{somepara}}"> I like </a>

<script>
function cap(para1, para2){
    alert('here');
}
$("a[rel^='like']").click(function(){
   var para1 = this.dataset['para1'];
   var para2 = this.dataset['para2'];
   cap(para1, para2);
});
</script>

You may also write it like this if you prefer a more structured approach :

<a href="#" rel="like{{num}}" data-params="{'para1':'Oh','para2':'{{somepara}}'}"> I like </a>

$("a[rel^='like']").click(function(){
   var params = this.dataset['params'];
   var para1 = params.para1;
   var para2 = params.para2;

Note that if the document isn't an HTML5 document you'll have to use the more compatible data function of jQuery (but there hardly is any reason not to use HTML5 doctype today) :

var para1 = this.data('para1');

Answer 2

You may like to try this.

<a class="ilike" href="javascript:;" data-p1="abc" data-p2="123"> I like </a>

<script>
    function cap(para1, para2){
        alert('here');
    }

    $(function(){
        $('.ilike').click(function(){
            var $this = $(this);
            var p1 = $this.data('p1');
            var p2 = $this.data('p2');
            cap(p1, p2);
        });
    });

</script>

Answer 3

If you want to do it via onclick, it's either that 1) you have declared your function in wrong scope or 2) another JS error occurred before the function declaration and caused it to not be executed.

To fix the scope problem, you can try doing window.cap = function(para1, para2) { ...

To see if there are any errors, try something like firebug or any browser developer tools and check for errors under console.