how to pass data from multiple button to 1 jquery

Question

first, i have multiple dynamic buttons which generate by php. example:

<button id='btn' type='submit' name='btn' value='recordnumber5' title='deletefromtableA'>delete</button>
<button id='btn' type='submit' name='btn' value='recordnumber50' title='deletefromtableA'>delete</button>
<button id='btn' type='submit' name='btn' value='recordnumber15' title='deletefromtableA'>delete</button>
<button id='btn' type='submit' name='btn' value='recordnumber35' title='deletefromtableA'>delete</button>

now i need to pass/get value to jquery when i calling jquery

$("#btn").click(function(){
   var tit=("$btn").attr("title");
   var val=("$btn").attr("value");
   alert(tit +":"+ val);
});

my problem is, it only function for the 1st button, others did not function. i know my code is have problem but how should i write, so that i can have multiple dynamic button but calling/using 1 jquery script and it can receive data from that button.

by the way, i did search on google and here but i could not find and refer, may be i dont know what is the right keyword to search.

Ps: if possible i wish to put the jquery into function and save to a js.file anyway, thanks for helping.

Don't forget to click the tick next to the answer that helped you most. That's the way to say "thank you" on Stack Overflow :) — James Allardice
– James Allardice, Commented Jun 30, 2012 at 18:34

James Allardice · Accepted Answer · 2012-06-30 17:59:39Z

3

id values must be unique in a document. Because of that, jQuery only returns the first element with that id. Change the id attribute to a class attribute, and modify your selector:

$(".btn").click(function(){
   var tit = this.title;
   var val = this.value;
   alert(tit +":"+ val);
});

Also notice the changes to the callback function. What you had wasn't going to work (you'd missed the $ to actually call jQuery) and if you had fixed that mistake, the selectors don't make sense. You can use this to refer to the element that has been clicked.

answered Jun 30, 2012 at 17:59

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

6 Comments

user1493339 Over a year ago

thanks james, after i follow your suggestion using class, others button is working but it receiving 1st button value and title. As i say each button will having different value which i need to know which button is clicking.

James Allardice Over a year ago

@user1493339 - Have you changed your callback function to the code in my answer? You need to use this to refer to the button that was actually clicked.

user1493339 Over a year ago

sorry i did not change that, ok you are right, everything work accordingly. it would be nice if i can move the jquery code to another file in function. sorry i new in jquery, just finish the tutorial/sample from w3school 2 days ago.

James Allardice Over a year ago

It shouldn't need to go in a function (it just needs to go in a DOM ready callback). You can move it to another file no problem. Just make sure that file is included on the page with your buttons.

user1493339 Over a year ago

james, i'm not sure this can be done or not. is that possible.... 1). html button values pass to jquery 2). jquery receive it and pass to ajax 3). ajax get it and pass to php 4). php get it and perform mysql query then return message 5). returned message and show with jquery.append

|

abhshkdz · Accepted Answer · 2012-06-30 18:26:24Z

1

You need to use class instead of id. Id elements are unique in the entire DOM.

<button class='btn' type='submit' name='btn' value='recordnumber5' title='deletefromtableA'>delete</button>
<button class='btn' type='submit' name='btn' value='recordnumber50' title='deletefromtableA'>delete</button>
<button class='btn' type='submit' name='btn' value='recordnumber15' title='deletefromtableA'>delete</button>
<button class='btn' type='submit' name='btn' value='recordnumber35' title='deletefromtableA'>delete</button>

And the appropriate javascript

$(".btn").click(function(){
    var tit=this.title;
    var val=this.value;
    alert(tit +":"+ val);
});

edited Jun 30, 2012 at 18:26

answered Jun 30, 2012 at 18:06

abhshkdz

6,3651 gold badge23 silver badges31 bronze badges

3 Comments

user1493339 Over a year ago

ok, thanks, your solution is same as james, is good to have help from you guys.

James Allardice Over a year ago

@user1493339 - Notice that the code is slightly different here. It passes this to jQuery and uses the attr method. That will still work, but it will be more efficient to use the native DOM properties e.g. this.value, as is done in my answer.

user1493339 Over a year ago

as i say, i'm new with jquery, i did not notice that slightly different about that. thanks again.

Collectives™ on Stack Overflow

how to pass data from multiple button to 1 jquery

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related