如何在输入总和输入时显示基于总和的结果

How to display a result based on a sum as sum inputs are entered

本文关键字：输入 于总 和的 结果 显示      更新时间：2023-09-26

我正在根据用户输入的增值税税率计算包含增值税的价格。我想在输入框中显示结果。我可以在用户输入增值税税率和价格时显示结果吗？无需点击按钮或重新提交表格。

我用这个来计算含增值税的价格。

<?php
    $taxprice = ($tax * $selling)
?>

$tax是用户输入税率的输入框的值。$selling是用户输入价格的输入框的值。$taxprice是当用户输入其他两个字段的值时，我希望在输入框中显示的值。

由于用户在不使用按钮的情况下输入了这两个值，因此我无法实时计算总和。有人知道怎么做吗？谢谢Jon：）

如果希望在不提交表单的情况下更新值，则需要使用Javascript。

这样的东西可能就足够了：

// Execute the function() {} when the page loads
window.addEventListener('load', function() {
    // Get the button that is clicked to calculate the tax
    var calcbutton = document.getElementById('calculateButton');
    calcbutton.addEventListener('click', function() {
        // Get the tax amount from an input with an ID of "taxValue"
        var tax = document.getElementById('taxValue').value || 0;
        // Get the selling price from an input with an ID of "sellingPrice"
        var sellingPrice = document.getElementById('sellingPrice').value || 0;
        // Calculate the taxed amount
        var taxPrice = sellingPrice * tax;
        // Set the value of an input with an ID of 'taxedPrice' to the calculated taxed price
        document.getElementById('taxedPrice').value = taxprice;
    });
});

您可能想研究在税收和价格值的输入上使用"keyup"事件，以反映价格或税收变化后的纳税价值。

例如

// Assuming page is loaded
var taxInput = document.getElementById('taxValue');
var sellingPriceInput = document.getElementById('sellingPrice');
var taxedPriceInput = document.getElementById('taxedPrice');
taxInput.addEventListener('keyup', calcTaxPrice);
sellingPriceInput.addEventListener('keyup', calcTaxPrice);
function calcTaxPrice() {
    var tax = taxInput.value || 0;
    var sellingPrice = sellingPriceInput.value || 0;
    var taxPrice = sellingPrice * tax;
    taxedPriceInput.value = taxprice;
}

使用Javascript在客户端执行

使用jQuery的客户端计算器的基本模式：

$(function () {
    $('#a').on('input', function () {
        var a = parseFloat($(this).val()),
            b = parseFloat($('#b').val()),
            c = a * b;
        $('#c').val(c);
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="calc">
    <label>Enter a number:<br />
      <input type="text" id="a" />
    </label><br />
    <label>Multiplier:<br />
      <input readonly type="text" id="b" value="0.0725" />
    </label><br />
    <label>Calculated value:<br />
      <input readonly type="text" id="c" />
    </label>
</form>

它由三个部分组成：用户输入、预定义输入（可选）、计算输出。

预先定义输入并让用户知道它的一种简单方法是使用具有readonly属性的input文本字段。

如果您希望输出保持为表单的一部分，也可以方便地将相同类型的readonly input用于输出。您还可以选择在div或其他更容易设置样式的容器元素中显示输出。

对于"实时"更新，请使用侦听input事件（此事件与IE8或更早版本不兼容。或者，当输入有焦点时，收听"keydown"。）

注意：使用parseFloat将输入的文本转换为浮点数，可以在不返回NaN的情况下进行计算。此外，您应该使用某种输入限制和/或验证来防止意外值。

相关文章：