identify jquery button click in php rows

Question

I have an input button in :

while ($row = $result->fetch()) {
echo '<table class="cart-row" cellspacing="0" cellpadding="0" width="100%">';
echo '<tbody>';
echo '<tr>';
echo '<td width="75"><img border="0" width="59px" height="78px" title="" alt="" src=' . $row["ImagePath"] .'></td>';
echo '<td width="203"><span id="itemName" class="itemElements">'. $row["Name"] .'</span></td>';
echo '<td width="135"><span id="qtyNum">('. $row["Qty"] .')</span> <br />';
echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';                            
echo '<td width="180"><span id="orderStatus" class="itemElements">In Stock Usually dispatched within 24 hours</span></td>';
echo '<td width="175" id="itemPriceRow"><span id="itemPrice">€ '. $row["Price"] .'</span></td>';
echo '</tr>';
echo '</tbody>';
echo '</table>';
echo '<br>';                            
}

I'm trying to use this method to trigger an event when the button is clicked however the event is only being fired for the first button generated in the first row. I'm using this method:

$(document).ready(function() {
                $('#btnRemove').click(function() {
                     alert("test");
                });
             });

Any ideas how I can fix this problem? I know in C# there is on row databound method however in jQuery I dont now if it exsists. Thanks

As mentioned in a comment below-- you are using id incorrectly all over the place. This is causing a problem for your specific case, but you will also need to update ALL your markup to use IDs correctly (or actually, to NOT use IDs). — Greg Pettit, Dec 21 '11 at 21:23

score 3 · Accepted Answer · edited May 23 '17 at 12:20

You are selecting an element to bind the click event handler to that has a unique ID. When you select by ID you will be returned only the first matching element because to be a valid ID it must be unique.

Change the ID to a class and change your selector to .btnRemove and the alert will work for all the buttons.

echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';

Should change to:

echo '<span id="qtyRemoveLink"><input class="linkbtn btnRemove" type="submit" value="Remove"></td>';

And:

$('#btnRemove').click(function() {

Should change to:

$('.btnRemove').click(function() {

Here is a demo: http://jsfiddle.net/rSyCw/

Here is an excellent answer on the site regarding the creation of valid HTML IDs: What are valid values for the id attribute in HTML?

Yup, and there are also many other instances in the sample code of IDs being re-used (ie. not unique). The OP should fix those while he's at it. ;-) — Greg Pettit, Dec 21 '11 at 21:22

score 2 · Answer 2 · answered Dec 21 '11 at 21:20

Use a class for the button, not an ID. IDs are unique identifiers (can only be one with that name on the whole page), however classes may be applied to multiple elements. So...

<input type="submit" id="btnRemove" />

Becomes

<input type="submit" class="btnRemove" />

And, as such, your selector changes to .btnRemove.

And, now that you know that IDs need to be unique, you should go ahead and re-configure the output to use classes, or use IDs with a unique ID appended. e.g.

<?php
  while ($row = $result->fetch()){
?>
    <!-- Other HTML -->
    <input type="submit" id="btnSubmit_<?= $row['Unique_Column_Id']; ?>" ... />

Then you can modify your selector:

$('[id^="btnSubmit_"]').click(...); // All elements with an
                                    // ID that starts with "btnSubmit_"

yes how could i have forgotten! thanks for helping me works now! — adi bon, Dec 21 '11 at 21:23
It is far better for performance to use classes rather than a pseudo-selector (regex) that requires messing around with strings. When possible jQuery uses `getElementByClassName()` which is quite fast but this only works when you select by class. — Jasper, Dec 21 '11 at 21:28

score 0 · Answer 3 · answered Dec 21 '11 at 21:21

One red flag here is that you are generating multiple elements with the same ID on each iteration of your loop. Element IDs need to be unique in your document. My guess is that jQuery is only binding to the first element it finds with the ID "btnRemove" because it assumes that your IDs are unique.

As others have stated, using a class name on your button would help your problem, but you should still come up with a way to put unique IDs on your itemName, qtyNum, qtyRemoveLink, orderStatus, itemPriceRow, and itemPrice elements, and anywhere else you might be using this technique.

identify jquery button click in php rows

3 Answers3