Question

我有这个领域：

<input type="text" id="price" name="price"> 
<input type="text" id="taxpercentage" name="taxpercentage">
<input type="text" id="taxpaied" name="taxpaied">
<input type="text" id="totalprice" name="totalprice">

在我添加价格和税率后，我希望taxpaied和totalprice字段自动填充计算值。

例如：如果price = 200且taxpercentage = 24，则最后2个字段应填充48和248。

我认为这可以通过javascript实现，但我没有在网上找到任何内容。

Answer 1

尝试这个......

<input type="text" id="price" name="price" onchange="calculate()"> 
<input type="text" id="taxpercentage" name="taxpercentage" onchange="calculate()">
<input type="text" id="taxpaied" name="taxpaied">
<input type="text" id="totalprice" name="totalprice">
    <script>
        function calculate()
{
    var price=document.getElementById("price").value;
    var tax=document.getElementById("taxpercentage").value;  
        if(price == "" || tax =="")
        {
          return false;
        }
    var taxpaied=document.getElementById("taxpaied");
    var totalprice=document.getElementById("totalprice"); 
        taxpaied.value = (price/100)*tax;
        totalprice.value = (price * 1) + (taxpaied.value * 1);
}
    </script>

Answer 2

http://fiddle.jshell.net/KGP5M/1/

var price, taxpercentage;
var update = function(){
    if(price && taxpercentage){
        document.getElementById('taxpaied').value= price * taxpercentage / 100;
        document.getElementById('totalprice').value= price + price * taxpercentage / 100;

    }
}
document.getElementById('price').onchange= function() {price = parseInt(document.getElementById('price').value); update();};
document.getElementById('taxpercentage').onchange = function() {taxpercentage = parseInt(document.getElementById('taxpercentage').value); update()};

Answer 3

有很多方法可以做到这一点，使用普通JS可能的方法之一是： -

JS

function add(){ //function is called when input changes in the input field
var x=parseInt(document.getElementById("price").value); //parse the value in input as integer and assign it to variable x
var y = parseInt(document.getElementById("taxpercentage").value);//get tax percentage value
document.getElementById("taxpaied").value=x*y/100; //calculate tax and assign to taxpaid field
document.getElementById("totalprice").value=x+x*y/100; //calculate total
}

HTML

<input type="text" id="price" name="price" value="0" onchange="add()"> 
<input type="text" id="taxpercentage" name="taxpercentage"  value="0" onchange="add()">
<input type="text" id="taxpaied" name="taxpaied">
<input type="text" id="totalprice" name="totalprice">

Fiddle

请注意，函数内部的计算可以改变，我自己做了一个例子。一旦从中获取值，就可以更改函数的内部工作。

Answer 4

希望这有帮助

 <input autocomplete="off" type="text" id="price" name="price" onkeyup="val()" onblur="val()"> 
<input autocomplete="off" type="text" id="taxpercentage" name="taxpercentage"  onkeyup="val()" onblur="val()">
<input autocomplete="off" type="text" id="taxpaied" name="taxpaied">
<input autocomplete="off" type="text" id="totalprice" name="totalprice">

<script type="text/javascript">

    function val()
    {
        var price=parseFloat(document.getElementById("price").value);
        var taxpercentage=parseFloat(document.getElementById("taxpercentage").value);
        if(document.getElementById("price").value!="" && document.getElementById("taxpercentage").value!="")
        {

            var taxpaied = (price/100)*taxpercentage;
            var toatl= price+taxpaied;
            document.getElementById("taxpaied").value=taxpaied.toFixed(2);
            document.getElementById("totalprice").value=toatl.toFixed(2);
        }
        else
        {
            document.getElementById("taxpaied").value="";
            document.getElementById("totalprice").value="";
        }

    }
</script>

Answer 5

这样做

Fiddle

$("#price,#taxpercentage").keyup(function(){
var val=$("#price").val();
var Tax=$("#taxpercentage").val();
var Taxpaided=(val/100)*Tax;
$("#taxpaied").val(Taxpaided);
var Tot=parseInt(val)+Taxpaided;
$("#totalprice").val(Tot); 
});

Answer 6

试试这个 使用JQUERY DEMO

<强> HTML

<input type="text" id="price" name="price"> 
<input type="text" id="taxpercentage" name="taxpercentage">
<input type="text" id="taxpaied" name="taxpaied">
<input type="text" id="totalprice" name="totalprice">

<强> JQUERY

$("#taxpercentage").blur(function(){
    if($("#price").val())
    {
        var price =parseFloat($("#price").val()),
            tax =parseFloat($(this).val());
      var taxpaied = price * tax/100;
        $("#taxpaied").val(taxpaied);
       $("#totalprice").val(taxpaied+price);
    }
});

使用JAVASCRIPT DEMO

<强> HTML

<input type="text" id="price" name="price"> 
<input type="text" id="taxpercentage" name="taxpercentage" onchange="calculate()">
<input type="text" id="taxpaied" name="taxpaied">
<input type="text" id="totalprice" name="totalprice">

<强> JAVASCRIPT

function calculate()
       {
    var price=document.getElementById("price").value;
    var tax=document.getElementById("taxpercentage").value;  
        if(price && tax)
        {      
        var taxpaied=document.getElementById("taxpaied");
        var totalprice=document.getElementById("totalprice"); 
        taxpaied.value = (price/100)*tax;
        totalprice.value = (price * 1) + (taxpaied.value * 1);
        }
      }

计算数据并将其添加到输入字段中

6 个答案: