为什么我的脚本只获取我的php表的第一行？ 下面是我的代码

Question

This is my JavaScript code

$('input#name-submit').on('click', function() {
    var name = $('input#name-submit').val();
    if($.trim(name) != ''){
        $.post('getmodalreasonUT.php', {name: name}, function(data) {
            alert(data);
        });
    }
});

and this is my php code

<?php

if(isset($_POST['Pending'])){
    echo "<header class='panel-heading'> Undertime Pending</header>";
    echo "<table class='table table-bordered'>
    <thead>
    <tr class='tbl-record'>
    <th>ID</th>
    <th>Name of Employee</th>
    <th>Position</th>
    <th>Date Filed</th>
    <th>Number of hours</th>
    </tr>
    </thead>
    <tbody>";

    $sql =   "SELECT * FROM utrequestform WHERE user_eid = '$employeenumber' and check_managerandsspv = '0'";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {

        while($row = $result->fetch_assoc()){                             
            echo "<tr class='tbl-info text-center'>                            
            <td>".$row['user_eid']."</td>
            <td>".$row['nameofemployee']." </td>
            <td>".$row['position']."</td>
            <td>".$row['datefiled']."</td>
            <td>".$row['noofhours']."</td>    
            <td><input type='submit' id='name-submit' value='$row[id]'></td>
            </tr> ";

        }
    }else{
        echo "<tr><td colspan='10'>No pending UT request.</td></tr>";
    }
    echo "</tbody></table>";
}
?> 

This is my echo php code.

<?php 
    include ('connection.php');
    $please = $_POST['name'];
    echo $please;
?>

Answer 1

You are generating the HTML like this:

<input type='submit' id='name-submit' value='$row[id]'>

Which will render the same input several times with the same ID. This is invalid markup. You need to change that line for:

<input type='submit' id='name-submit-$row[id]' name='request-val' value='$row[id]'>

Then change your jQuery for:

$('input[name="request-val"]').on('click', function() {
    var name = $(this).val();
    if($.trim(name) != ''){
        $.post('getmodalreasonUT.php', {name: name}, function(data) {
            alert(data);
        });
    }
});

Avoid having duplicated IDs at all costs . That will save you from a lot of frustration later down the road.