格式使用Java腳本編碼輸入類型

Question

代碼乘法的JavaScript將成倍單價和數量 並顯示結果到另一文本框（總）

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

的問題是，當我把文本框（數量和單價）的數據，它不計算。

Answer 1

變化

var myResult = myunitprice * myquantity; 

到

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

Answer 2

嘗試onchange代替oninput

這樣

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

注意：當您從文本框中失去焦點時，onchange將會運行。

Answer 3

更新的代碼

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/

Answer 4

你必須在腳本中的幾個誤區：

• 你是不是你正在添加旁邊許多的函數調用將迭代次數傳遞給函數
• 您沒有ID爲元素=「總」

嘗試使用這兩個腳本：

<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