PHP-generated table button onclick works only for the first

Question

I have a HTML table generated from PHP (from the results of SQL query):

echo "<table border=\"5\"><tr><th>Codice</th><th>Titolo</th><th>Anno Creazione</th><th>Materiale</th><th>Altezza</th><th>Peso</th><th>Museo</th></tr>";
while($row = mysqli_fetch_assoc($results)) {
        echo "<tr><td>".$row["Codice"]."</td><td>".$row["Titolo"]."</td><td>".$row["Anno_creazione"]."</td><td>".$row["Materiale"]."</td><td>".$row["Altezza"]."</td><td>".$row["Peso"]."</td><td>".$row["Museo"]."</td><td><button id=\"modifica\" type=\"button\">Modifica</button></td><td><button id=\"cancella\" type=\"button\">Cancella</button></td></tr>";
}
echo "</table>";

Then, I have this JQuery:

$("#cancella").click(function(){
    if(confirm("Vuoi davvero eliminare questi dati?")){
        var codice = <?php echo json_encode($cod); ?>;
        var tipo = <?php echo json_encode($tipo_opera); ?>; 
        window.location.href = "delete.php?codice="+codice+"&tipo="+tipo;
    }
 });

This click function works only for the "delete" button at the first row. Why?

fyz · Accepted Answer · 2017-03-12 12:11:17Z

1

id is unique and therefore can only be assigned to one element.

use a class.

<button class=\"cancella\" type=\"button\">Cancella</button>

$(".cancella").click(function(){
 // Do Something.
});

Alternative:

<button type=\"button\" onclick=\"cancella()\">Cancella</button>

function cancella(){}

edited Mar 12, 2017 at 12:11

answered Mar 12, 2017 at 11:48

fyz

3,37231 silver badges31 bronze badges

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

3 Comments

Hammerbot Over a year ago

Use a class and then use the this element inside the click event

Cosimo Sguanci Over a year ago

If I use a class it doesn't work, and the Chrome Console doesn't return errors

fyz Over a year ago

I checked.. works fine.. make sure everything is loaded, like jquery and your scripts.. I am writing another alternative.. try that too.

user1405631 · Accepted Answer · 2017-03-12 11:49:01Z

0

<button id=\"cancella\" type=\"button\">Cancella</button>

needs to be a class not an id

answered Mar 12, 2017 at 11:49

user1405631

Comments

Hmmm · Accepted Answer · 2017-04-04 05:49:28Z

The id should be unique, if that is repeating in your DOM structure then you will face the problem. Use class cancella something and then define some data attribute to identify specific element if you want to.

So your code will be...

In Html

echo "<tr><td>".$row["Codice"]."</td><td>".$row["Titolo"]."</td><td>".$row["Anno_creazione"]."</td><td>".$row["Materiale"]."</td><td>".$row["Altezza"]."</td><td>".$row["Peso"]."</td><td>".$row["Museo"]."</td><td><button id=\"modifica\" type=\"button\">Modifica</button></td><td><button data-myid=".$row['id']." class='cancella' type=\"button\">Cancella</button></td></tr>";

In JS

$(".cancella").click(function(){
  if(confirm("Vuoi davvero eliminare questi dati?")){
    var particular_element = $(this).attr('data-myid');
  }
});

Also if you are dynamically adding "more" elements then you should use $(document).on('click', '.cancella', function(){}); instead of $(".cancella").click(), hope it helps.

Collectives™ on Stack Overflow

PHP-generated table button onclick works only for the first

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related