passing parameter on jQuery onclick function from html onclick event

Question

I want to pass parameters to onclick jquery function from html onclick event.

html statement rendering in PHP

$name = "abcd";
for ($i=0;$<10;$i++){
$text .= '<tr>
             <td>'.$i.'</td>
             <td><div id="name">'.$name.'/div>
                 <a class="href" onclick="callJSFunc($i,\''.$name.'\')" ></a>
             </td>
          </tr>';
}

javascript..

function callJSFunc(i , name){
alert(i+"  "+name);
}

I want to convert it into someting...

$(".href").click(function(i,name,event){
alert(i+"  "+name);
});

The callJSFunc($i will not insert the value of $i since you're using a single quoted string.. — lethal-guitar
– lethal-guitar, Commented Jan 11, 2013 at 13:06

Irfan DANISH · Accepted Answer · 2013-01-11 13:03:21Z

6

Why don't you try in some other way

$name = "abcd";
for ($i=0;$<10;$i++){
$text .= '<tr>
         <td>'.$i.'</td>
         <td><div id="name">'.$name.'/div>
             <a class="href" data-id="'.$i.'" data-name="'.$name.'" ></a>
         </td>
      </tr>';
}

And in jQuery onClick

$(".href").click(function(){
    alert($(this).attr('data-id')+"  "+$(this).attr('data-name'));
});

answered Jan 11, 2013 at 13:03

Irfan DANISH

8,52912 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zero323 · Accepted Answer · 2013-11-03 09:26:36Z

3

You cannot change the way events are fired but you can always store those parameters as data-* attributes in markup and extract them inside the event handler. What you request is to subscribe for the event and the event object to naturally mutate according to what you desire as parameters, however the browser has no way to figure out what you require.

What I mean by using data-* attributes is to store the data inside your DOM element:

<a class="href" data-index="$i" data-name="$name" href="someHref" />

jQuery:

$('.href').click(function (event) {
    var index = $(this).attr('data-index'); // Yields a string use data() for other data types
    var name = $(this).attr('data-name'); // Yields a string use data() for other data types
});

edited Nov 3, 2013 at 9:26

zero323

331k108 gold badges981 silver badges958 bronze badges

answered Jan 11, 2013 at 13:01

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

1 Comment

Andreas Louv Over a year ago

You can also get the data using $(this).data("index/name").

Anton Timmermans · Accepted Answer · 2013-01-11 13:14:30Z

0

It is better to do this with jQuery instead of sending the parameters with PHP.

You can do something like this in your javascript:

$('a.href').click(function( event ) {
  var index = $('table').index(this); // Containing table
  var name = $(this).siblings('#name').innerHTML;
  alert( index + ' ' + name );
});

Btw, an id should be unique. Your code generates 10 table rows with in every one of them the id '#name'.

answered Jan 11, 2013 at 13:14

Anton Timmermans

3322 silver badges8 bronze badges

Collectives™ on Stack Overflow

passing parameter on jQuery onclick function from html onclick event

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related