Question

我正在尝试计算没有提交按钮的值。如果用户输入PC的重量，高度和数量，那么我的代码应该计算该值并自动将其显示在总文本字段中而不刷新页面。我怎么能这样做？

这是我的计算：total = weight * height * no of pcs

<div class="right">
    <label>
        <span>Id :</span>
        <input id="name" type="text" name="roll"  />
    </label>        
    <label>
        <span>material name :</span>
        <input  type="text" name="material" placeholder="material Name" />
    </label>        
    <input name="myprice" type="hidden"  size="10" maxlength="10"  value="1000" readonly/>              
    <label>
        <span>Weight:</span>
        <input name="kg" type="text"  size="10" maxlength="10"  value="0"/>
    </label>
    <label>
        <span> height:</span>
        <input name="mytax" type="text" value="0" size="3" maxlength="4"/>
    </label>
    <label>
        <span> no of pcs :</span>
        <input name="no" type="text" id="no"  value="0" size="3" maxlength="4"/>
    </label>
    <label>
        <span> Total :</span>
        <input name="Total" type="text"   value="0" size="3" maxlength="4"/>
    </label>
</div>

Answer 1

你会使用这样的东西

在文件中包含jquery代码

<script>

    $(document).ready(function() {

        $('input[name="no"]').keyup(function() {

            var kg = $('input[name="kg"]').val();

            var mytax = $('input[name="mytax"]').val();

            var no = $('input[name="no"]').val();

            var total = parseInt(kg) * parseInt(mytax) * parseInt(no);

            $('input[name="Total"]').val(total);

        });

    });

    </script>

希望它能起作用

Answer 2

试试这段代码

javascript代码

    <script type="text/javascript">
                function getOrderTotal() {
                    var iweight= document.myform.weight.value;
                    var iheight= document.myform.iheight.value;
                    var ino= document.myform.no.value;

                    if(!iweight.match(recurrency)) {
                        alert('Please provide an item cost in 0.00 format!');
                    }

                    else {

                        var ifinal=iweight * iheight * ino;

                        );


                        ifinal *= 100;
                        ifinal = Math.ceil(ifinal);
                        ifinal /= 100;
                        if(ifinal) {
                            ifinal = ifinal;
                        }

                        document.getElementById('mytotal').value = ifinal;

                    }
}

html代码

<div class="right">
       <label>
        <span> Id :</span>
        <input id="name" type="text" name="roll"  />
    </label>

    <label>
        <span>material name :</span>
        <input  type="text" name="material" placeholder="material Name" />
    </label>



       <label>
        <span>Weight:</span>
     <input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10"  value="0"/>
    </label>

    <label>
        <span> height:</span>
       <input name="height" id="height" type="text"  onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
    </label>


     <label>
        <span> no of pcs :</span>

      <input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>



    </label>
    <label>
        <span> Total :</span>

      <input name="Total" type="text" id="mytotal"  value="0" size="3" maxlength="4"/>



    </label>


    </div>

Answer 3

使用jquery

String sqlQuery = " delete from canned_message where msg_no in (?)";
Object[] params = {msgNos};
int rows = smsdbJdbcTemplate.update(sqlQuery, params);

Answer 4

试试这个：

在html中为所有输入字段添加id，以便我们可以轻松识别任何元素：

<div class="right">
    <label>
        <span> Id :</span>
        <input id="name" type="text" name="roll"  />
    </label>

    <label>
        <span>material name :</span>
        <input  type="text" name="material" placeholder="material Name" />
    </label>

    <input name="myprice" id="myprice" type="hidden"  size="10" maxlength="10"  value="1000" readonly/>

    <label>
        <span>Weight:</span>
        <input name="kg" id="kg" type="text"  size="10" maxlength="10"  value="0"/>
    </label>

    <label>
        <span> height:</span>
        <input name="mytax" id="mytax"  type="text" value="0" size="3" maxlength="4"/>
    </label>

    <label>
        <span> no of pcs :</span>
        <input name="no"  id="no" type="text" value="0" size="3" maxlength="4"/>
    </label>
    <label>
        <span> Total :</span>
        <input name="total" id="total" type="text"   value="0" size="3" maxlength="4"/>
    </label>
</div>

jquery的：

1）检查值是否不存在，然后使用parseFloat

将值存储在任何变量中

这里我们使用parseFloat，因为价格或权重可能是浮动值。

$( document ).ready(function() {
    $('#kg, #mytax, #no').change(function () {
        var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0;  
        var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0;  
        var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0;  
        var total = kg * mytax * no;
        $('#total').val(total);
    });
});

Answer 5

不使用JQuery或任何其他JavaScript库，普通的JavaScript解决方案将点击“按键”事件。

这是一个示例代码，只是为了给你一个想法：

<html>
<head>
<script>
function calculate () {
 var a = document.getElementById("a").value;
 var b = document.getElementById("b").value;
 document.getElementById("result").innerHTML = a * b;
}

</script>
</head>
<body>
First Value <input type="text" id="a"></input>
<br>
Second Value <input type="text" id="b" onkeyup="calculate()"></input>
<br>
<div id="result"></div>

</body>
</html>

按键时调用函数calculate()。它取值并进行乘法运算。

Answer 6

你可以试试这个。

<div class="right">
    <label>
        <span>Id :</span>
        <input id="name" type="text" name="roll"  />
    </label>        
    <label>
        <span>material name :</span>
        <input  type="text" name="material" placeholder="material Name" />
    </label>        
    <input name="myprice" type="hidden"  size="10" maxlength="10"  value="1000" readonly/>              
    <label>
        <span>Weight:</span>
        <input name="kg" type="text" id="weight" onblur="findTotal()"  size="10" maxlength="10"  value="0"/>
    </label>
    <label>
        <span> height:</span>
        <input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/>
    </label>
    <label>
        <span> no of pcs :</span>
        <input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/>
    </label>
    <label>
        <span> Total :</span>
        <input name="Total" type="text"  id="total" value="0" size="3" maxlength="4"/>
    </label>
</div>
<script type="text/javascript">
function findTotal(){
    var weight = document.getElementById('weight').value;
     var height = document.getElementById('height').value;
      var pc = document.getElementById('nopc').value; 


   total = weight * height * pc;
   if(isNaN(total)){
       alert("Please enter only numbers");

   }
     document.getElementById('total').value = total;
}
    </script>

如何在不提交按钮的情况下计算文本字段值

6 个答案: