php - JavaScript 用于更新表单内的价格

Question

我有一个 php 文件，它在表单中显示价格和数量。

Answer 1

id在生成的 HTML 中，您不能有多个相同的元素。一种出路是这样的：

$counter = 0;
while($queryresult = mysql_fetch_assoc($query)){    
    echo '<form method ="post" action="price.php">';
    echo '<input type="text" name ="quant" id="quant'.$counter.'" onblur="functionprice('.$counter.')" />';
    echo '<input type="text" name ="price" id="price'.$counter.'" onblur="functionprice('.$counter.')" />';
    echo '<input type="text" name="unitprice" id="unitprice'.$counter.'" readonly="true" />';
    echo "</form>";
    $counter++;
}//while

然后使用您要更改的行号调用此更新的 JavaScript 函数，例如functionprice(2);

<script type="text/javascript">
function functionprice(counter)
{
    var price = parseFloat(document.getElementById("quant"+counter).value);
    var quantity = parseFloat(document.getElementById("price"+counter).value);

    if (!(price == Number.NaN && quantity == Number.NaN))
        document.getElementById("unitprice"+counter).value = Number(price/quantity).toFixed(2);
}
</script>

Answer 2

首先，在多个元素上拥有相同的 ID 是不好的，这不是 W3C 的投诉。可能这就是其他表单元素没有更新的原因。您可以在idlike上附加数字"quantity_1"，"quantity_2"以便您可以更好地控制您的 javascript 代码

而且，如果您想将其视为数据库中的单行，请按照上面的评论使用，即 name = 'price[]'

Answer 3

首先，设置<form>在while循环之外。跳过 id=""，而是使用 class=""，因为元素的 id 必须是唯一的。

<?php
echo '<form method ="post" action="price.php">';

while($queryresult = mysql_fetch_assoc($query)){    
    $id = $queryresult['id']; //assumption is that id is an autoincremental integer
    echo '<input type="text" name ="quant[' . $id . ']" class="quant" onblur="functionprice(' . $id . ')" />'; //Make quant-array (dynamically)
    echo '<input type="text" name ="price[' . $id . ']" class="price" onblur="functionprice(' . $id . ')" />'; //Make price-array (dynamically)
    echo '<input type="text" name="unitprice[' . $id . ']" id="unitprice" readonly="true" />';
}//while

echo "</form>"

?>//close php tag
?>

然后做这样的事情（我希望你明白这个概念）

<script type="text/javascript">
function functionprice(id)
{
    var price = parseFloat(document.getElementById ("quant[" + id + "]").value); //Get value of element in quant-array
    var quantity = parseFloat(document.getElementById ("price[" + id + "]").value); //Get value of element in price-array

    if (!(price == Number.NaN && quantity == Number.NaN))
        document.getElementById ("unitprice[" + id + "]").value = Number(price/quantity).toFixed(2);
}
</script>

在编写这样的代码（上图）时，您可以在服务器端检索值时使用构建的数组（非常容易）。唯一的缺点 - 正如我所看到的 - 是如果你有很大的结果集（比如> 100.000行） - 数组可能会“吃掉”服务器上的内存。

示例： 如果您在 while 循环之后和内部放置一个提交按钮，<form>如下所示：';

while($queryresult = mysql_fetch_assoc($query)){    
    $id = $queryresult['id']; //assumption is that id is an autoincremental integer
    echo '<input type="text" name ="quant[' . $id . ']" class="quant" onblur="functionprice(' . $id . ')" />'; //Make quant-array (dynamically)
    echo '<input type="text" name ="price[' . $id . ']" class="price" onblur="functionprice(' . $id . ')" />'; //Make price-array (dynamically)
    echo '<input type="text" name="unitprice[' . $id . ']" id="unitprice" readonly="true" />';
}//while

echo "<input type=\"submit\" value=\"Skicka\" />";
echo "</form>"

?>//close php tag
?>

然后在 price.php 中（提交后），您可以通过执行以下操作来获取值：（当然也应该进行验证，以便获得所需的预期值/数组）

<?php
$quantArr = $_POST['quant'];
$priceArr = $_POST['price'];

//echo out a certain row from db (where id = 27)
echo 'quantity: ' . $quantArr[27];
echo 'price: ' . $pricearr[27];
?>