Question

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

我用它来计算增值税的价格。

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

$tax是用户输入税率的输入框的值。 $selling是用户输入价格的输入框的值。 $taxprice是我想要在输入框中显示的值，因为用户输入其他两个字段的值。

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

Answer 1

如果您希望在不提交表单的情况下更新值，则需要使用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'事件，以便在价格或税收更改后立即反映纳税值。

E.g。

// 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;
}

Answer 2

使用Javacript

进行客户端操作

使用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>

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

预先定义输入并让用户了解输入的简单方法是使用input文本字段和readonly属性。

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

对于“直播”更新，请使用收听input事件。 （此事件与IE8或更早版本不兼容。或者，当输入具有焦点时，请听'keydown'。）

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

如何输入基于总和的结果作为总和输入

2 个答案:

使用Javacript