如何解决这个计算脚本的价格，电话号码，2位数字，并为成本添加文本字段

How to fix this calculate script for price, phone number, 2 digits and add textfield for cost?

本文关键字：数字 电话号码 2位 字段 文本 添加 解决 何解决 脚本 计算      更新时间：2023-09-26

我有一个计算脚本，用于价格，电话号码和最后一个电话号码的2位数字。

价格将显示通过选择链接在我的网站。当价格和2位数字自动显示时，我有一点问题。当价格自动显示，我输入电话号码时，成本栏没有自动成本，仍然为0。我必须点击价格列和数字列来显示成本。

例如，在价格栏输入2000，输入电话号码，自动显示数字栏，但成本栏没有自动显示成本，仍然为0。所以，你必须点击价格列和数字列来显示成本。

还有一个小问题，如果我在textfield中添加cost列，就像这样

<tr>
        <td>4</td>
        <td>Cost</td>
        <td><input class="txt" onfocus="calculateSum()" name="sum" type="text" id="sum"></td>
</tr>

在textfield的成本列中也没有自动成本。

如何在成本列中显示自动成本，也与文本框?这个脚本有解决方案吗?

的例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
	$('#phone_number').on('keyup', function() {
	$('#digits').val($(this).val().substr(-2));
});
});
</script>
<script>
$(document).ready(function(){
 
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {
 
            $(this).keyup(function(){
                calculateSum();
            });
        });
 
    });
 
    function calculateSum() {
 
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {
 
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
 
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#sum").html(sum.toFixed(0));
}
</script>
        
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" onfocus="calculateSum()" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" onfocus="calculateSum()" name="digits" type="text" id="digits"></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
</body>
</html>

你的问题不清楚。我已经尽力解决你的问题了。刚接触web编程不是问题，但是不能向别人表达你的问题，可能会让你的问题得不到回答。所以，试着让你的问题尽可能简单易懂。

我已经把你的jQuery代码压缩到几行，并且把你的两位数字段设置为只读，这样它就可以由代码自己计算了。

$(document).ready(function() {
  var price=$('#price'),
      phone=$('#phone_number'),
      digits=$('#digits'),
      sum=$('#sum');
  function calculateSum() {
    var digitsVal=parseInt(phone.val().substr(-2));
    digitsVal=isNaN(digitsVal)?0:digitsVal;
    digits.val(digitsVal);
    sum.html(parseFloat(price.val())+digitsVal);
  };
  phone.on('keyup', calculateSum);
  price.on('keyup', calculateSum);
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" name="digits" type="text" id="digits" readonly></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
</body>
</html>

更新:如果您需要将cost设置为textfield而不是span，则只需进行以下更改

$(document).ready(function() {
  var price=$('#price'),
      phone=$('#phone_number'),
      digits=$('#digits'),
      sum=$('#sum');
  function calculateSum() {
    var digitsVal=parseInt(phone.val().substr(-2));
    digitsVal=isNaN(digitsVal)?0:digitsVal;
    digits.val(digitsVal);
    sum.val(parseFloat(price.val())+digitsVal);
  };
  phone.on('keyup', calculateSum);
  price.on('keyup', calculateSum);
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" name="digits" type="text" id="digits" readonly></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
    </tr>
</table>
</body>
</html>

我做了以下修改:

sum.html(parseFloat(price.val())+digitsVal);


sum.val(parseFloat(price.val())+digitsVal);

和

<td align="center"><span id="sum">0</span></td>


<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
相关文章：