Question

I have a problem with a input button insert in a html table and detecting the pressed button with javascript. All works but, if I alert it in javascript, I can see that it gives me always the element of the first row. Also, if I press the element of the last row.

Now I will explain better with code. In this way I fill the table with the button and all works fine:

//$shows is an array
$size = count($shows);


if ($size != 0) {   
echo "<table class='datatable'>";
echo "<thead>";
echo "<tr>";
echo "<th>ID</th>";
echo "<th>Name</th>";
echo "<th>Language</th>";
echo "<th>Add</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>"; 
}

for($i = 0 ; $i < $size; ++$i) {

echo "<tr>";
echo "<td>{$shows[$i]->id}</td>";
echo "<td>{$shows[$i]->name}</td>";
echo "<td>{$shows[$i]->language}</td>";
echo "<td>";
echo "<input type='hidden' id='add' value='yes' />";
echo "<input type='hidden' id='seriesid' value={$shows[$i]->id} />";
echo "<input type='hidden' id='lang' value={$shows[$i]->language} />";
echo "<input type='submit' id='name-submit' class='button plain' value='ADD'>";
echo "<div id='add-data'></div>";
echo "</td>";
echo "</tr>";
}


  if ($size != 0) {
  echo "</tbody>";
  echo "</table>";
  }

So in this way, I can see all information in the table and I also see a button for each row. Then I want to detect the button pressed for every row and I have this file in javascript:

$('input#name-submit').click(function() {

    var add = $('input#add').val();
    var seriesid = $('input#seriesid').val();
    var lang = $('input#lang').val();
    alert(lang);
    if ($.trim(add) != '') {

        $.post('AccessDB.php', {add:add, seriesid:seriesid, lang:lang}, function(data) {
            alert(data);
        });
    }

});

Also, in this way I can detect the button pressed and shows me the alert with the lang element, but the lang element is always the element of the first row. If I press the button in the last row (with a different lang element) I see always the element of the first row. If I use the seriesid or the name element for example, it is always the element of the first row. So, how I can detect the other rows also?

Answer 1

You are using same id again and again.Use class instead of class
use

echo "<input type='hidden' class='add' value='yes' />";

instead of

echo "<input type='hidden' id='add' value='yes' />";

and use this

    var add = $(this).parent().find(".add").val();
    var seriesid = $(this).parent().find('.seriesid').val();
    var lang = $(this).parent().find('.lang').val();

instead of

    var add = $('input#add').val();
    var seriesid = $('input#seriesid').val();
    var lang = $('input#lang').val();