使用Java脚本格式化输入类型的编码

format coding for input type using java script

本文关键字：类型 编码 输入 格式化 Java 脚本 使用      更新时间：2023-09-26

javascript乘法代码，将单价和数量相乘并将结果显示到另一个文本框(total)

<script>
function calculate() {
        var myunitprice = document.getElementById('unitprice').value;   
        var myquantity = document.getElementById('quantity').value;
        var result = document.getElementById('total');  
        var myResult = myunitprice * myquantity;
        result.value = myResult.toFixed(2); }
</script>

这是另一个动态文本框的代码，当选择它时，它将添加另一个文本框。

    <script>
var php = '';
$('#children').on('change', function() {
    children = $(this).val();
    html = '';
    for (var i = 0; i < children; i++) {
        html += '<table><tr><td><label><b>Item Purchase</b></label><input type="text" id="item' + i + '" name="child' + i + 'Name" /><label>Amount</label><input type="text" id="amount' + i + '" name="child' + i + 'Name" /><label>Unit</label><input type="text" id="unit' + i + '" name="child' + i + 'Name" /><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" onchange="calculate()" /><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" onchange="calculate()" /><td>';
    }
    $('#kidsFields').html(html);
    $('#kidsFields').append('<br><td><input type="submit" value="Submit" /></td></tr></table>');
    $('.ui-page').trigger('create');
});
</script>

我的html

<form data-ajax="false" method="post" action="purchasingAddRecords.php">
 <center>
 <table>    
 <tr>
 <td>
 <td>
<div data-role="content">
<li data-role="fieldcontain"> 
<label for="children" class="select">Add</label>
<select name="children" id="children" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> 
</li>
<div id="kidsFields"></div>
</div>

的问题是，当我把数据放在文本框(数量和单价)，它不计算

您的脚本中有几个错误:

  • 您正在为函数调用添加一个数字
  • 您没有将迭代次数传递给函数
  • 没有id='total'的元素

尝试使用以下两个脚本:

<script>
    function calculate(number) {
       var myunitprice = document.getElementById('unitprice'+ number).value;
       var myquantity = document.getElementById('quantity' + number).value;
       var result = document.getElementById('total' + number);
       var myResult = myunitprice * myquantity;
       result.value = myResult.toFixed(2);
    }
    $('#children').on('change', function() {
        children = $(this).val();
        injection = '';
        for (var i = 0; i < children; i++) {
            injection += '<table><tr><td><label><b>Item Purchase</b></label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Amount</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Unit</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" oninput="calculate(' + i + ')" value="0" /><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" oninput="calculate(' + i + ')" value="0" /><label>Total</label><input type="text" id="total' + i + '" value="0" /> <td>';
        }
        $('#kidsFields').html(injection);
        $('#kidsFields').append('<br><td><input type="submit" value="Submit" /></td></tr></table>');
        $('.ui-page').trigger('create');
    });
</script>

我有一个工作活塞http://plnkr.co/edit/iKuIgbROfSEic6BNTiPy?p=preview

变化

var myResult = myunitprice * myquantity;


var myResult = parseFloat(myunitprice) * parseInt(myquantity);

尝试用onchange代替oninput

这样的

oninput="calculate()' + i +'"到onchange="calculate()"

注意:onchange将运行功能，当你失去焦点从你的文本框。

更新代码 

var php = '';
$('#children').on('change', function () {
children = $(this).val();
html = '<table>';
for (var i = 0; i < children; i++) {
    html += '<tr><td><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" oninput="calculate(' + i + ')" /></td><td><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" oninput="calculate(' + i + ')" />' +
        '</td><td><label>Total</label><input readonly="readonly" type="text" name="total" id="total' + i + '"  /></td></tr>';
}
html += '</table><label>Grand Total </label><input type="text" id="GrandTotal" />'
$('#kidsFields').html(html);
$('.ui-page').trigger('create');
}); 
function calculate(i) {
    var myunitprice = document.getElementById('unitprice' + i).value;
    var myquantity = document.getElementById('quantity' + i).value;
    var result = document.getElementById('total' + i);
    var myResult = myunitprice * myquantity;
    result.value = myResult.toFixed(2);
    TotalValue();
}
function TotalValue() {
    var totalValue = 0;
    $(document).find('input[name=total]').each(function(index, Obj) {
        if (isNaN(parseFloat($(Obj).val()))) $(Obj).val(0)
        totalValue += parseFloat($(Obj).val())
    })
    $('#GrandTotal').val(totalValue.toFixed(2))
}
http://jsfiddle.net/santoshj/5796xu77/

相关文章：