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

Question

这是我的 JavaScript 代码

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

这是我的 php 代码

<?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>";
}
?> 

这是我的 echo php 代码。

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

Answer 1

您正在生成这样的 HTML:

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

这将使用相同的 ID 多次呈现相同的输入。这是无效的标记。您需要更改该行:

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

然后将您的 jQuery 更改为:

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

不惜一切代价避免拥有重复的 ID。这将使您免于以后遇到很多挫折。