Javascript引用php中的id元素

时间:2015-07-03 15:17:35

标签: javascript php forms

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

问题是引用输入的相关id元素。我所拥有的JS只引用了php数组中的最后一个元素。所以例如id名称是id="qty" . $userid,所以例如id名称将是qtyuser001,qtyuser002,qtyuser003等,但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

1 个答案:

答案 0 :(得分:1)

你的问题是你每次都没有初始化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>