引用php中id元素的Javascript - Javascript referencing to id element in php

Javascript referencing to id element in php

本文关键字：Javascript 元素 id php 引用 | 更新日期: 2023-09-27

我有一个用php显示用户数据的表单。然后我有一个输入字段，其中应该输入数量。然后执行的JS计算总数并更新总输入元素。

问题在于对输入的相关id元素的引用。我的JS只是引用php数组中的最后一个元素。例如id名称为id="qty" . $userid，例如id名称将为qtyuser001、qtyuser002、qtyuser 003等，但JS仅指qtyuser003。

我已经为此挣扎了一天多，尝试了不同的方法，但我无法让它发挥作用。有没有其他方法可以解决这个问题？

php代码

$get2 = mysqli_query($con,"SELECT * FROM table WHERE ...");
echo '<form method="post" action="">';
while($row2 = mysqli_fetch_array($get2)) {
$userID = $row2['userID'];
$fn = $row2['FirstName'];
$ln = $row2['LastName'];
echo '<tr>';
    echo '<td><input readonly name="userID[]" id="userID ' . $userID . '" value="' . $userID . '"></td>';
    echo '<td>' . $fn . ' ' .  $ln . '</td>';
    echo '<td><input type="text" size="5" name="nrOfQ[]" id="nrOfQ' . $userID . '" onchange="calc()"></td>';
    echo '<td><input readonly type="text" size="5" name="total" id="total' . $userID . '"></td>';
echo '</tr>';
}
echo '</table>';

JS代码

<script>
function calc() {
    var userid = <?php echo json_encode($userID); ?>;
    var myrate = <?php echo json_encode($FieldInterviewerRate); ?>;
    var myqty = document.getElementById('nrOfQ' + userid).value; 
    myResult = myqty * myrate;
    var elem = document.getElementById('total' + userid);
    elem.value = myResult;
}
</script>

我现在没有那么好的Javascript

您的问题是，您每次都没有初始化JS函数，而且不应该初始化。JS代码不应该依赖于PHP，而是动态的。请尝试这个

php

$get2 = mysqli_query($con,"SELECT * FROM table WHERE ...");
    echo '<form method="post" action="">';
    while($row2 = mysqli_fetch_array($get2)) {
    $userID = $row2['userID'];
    $fn = $row2['FirstName'];
    $ln = $row2['LastName'];
    echo '<tr>';
        echo '<td><input readonly name="userID[]" id="userID ' . $userID . '" value="' . $userID . '">
        <input type="hidden" id="myRate' . $userID . '"></td>';
        echo '<td>' . $fn . ' ' .  $ln . '</td>';
        echo '<td><input type="text" size="5" name="nrOfQ[]" id="nrOfQ' . $userID . '" onchange="calc(this)"></td>';
        echo '<td><input readonly type="text" size="5" name="total" id="total' . $userID . '"></td>';
    echo '</tr>';
    }
    echo '</table>';

    <script>
function calc(obj) {

    var id = obj.id;
    var userId = id.substr(5);
    var myrate = document.getElementById('myRate' + userId).value; 
    var myqty = document.getElementById('nrOfQ' + userId).value; 
    myResult = myqty * myrate;
    var elem = document.getElementById('total' + userId);
    elem.value = myResult;
}
</script>