配列の各行のデータテキストボックスの値を計算する方法は？

Question

各行のデータ配列の合計の合計を表示します。私は5行のデータを持っており、それぞれのデータの結果を得たいと思っています。誰かが私にそれを理解するのを助けることができますか？

function subtotal(konversi){ 
 
    var hitung = (document.getElementById('quantity').value * document.getElementById('packing_value').value); 
 
    document.forms.demoform.quantity_konversi.value = hitung; 
 
}

<form id='demoform'> 
 
<?php 
 
$jumlah=5; 
 
for($i=0; $i<$jumlah; $i++){ 
 
    $nomor = $i + 1; 
 

 
    echo"$nomor"; 
 
?> 
 

 
<input type='text' name='quantity[]' id='quantity' onchange="subtotal(this.value,getElementById('packing_value').value);"> 
 
X 
 
<input type='text' id="packing_value" value='10' readonly='yes'> 
 
<input type='text' name='quantity_konversi[]' id='quantity_konversi' placeholder='result ???'><br/> 
 

 
<?php } $nomor++ ?> 
 

 
</form>

Answer 1

あなたの問題は、すべての入力フィールドが同じIDを持っているということです。 HTMLでは、すべての要素/ htmlタグに一意のIDが必要です。したがって、idで参照すると、JavaScriptはIDの最初の出現箇所を見つけ、この要素を使用します。他のすべての要素は、同じIDを持っていても無視されます。 idsが一意であることを覚えておいてください。クラスは複数の要素で使用できます。

<input type='text' name='quantity[]' id='quantity1' onkeyup="subtotal();"> 
<input type='text' name='quantity[]' id='quantity2' onkeyup="subtotal();"> 
    ... 
<input type='text' name='quantity[]' id='quantity5' onkeyup="subtotal();"> 

：

は

<input type='text' name='quantity[]' id='quantity<?php echo"$nomor"; ?>' onkeyup="subtotal();"> 

PHPサーバーは、それから、次のようになります。

はあなたの問題を解決するために、私はPHPの変数$nomorとの定期的なquantity IDの最後にユニークなIDを追加しました

forループ内で実行中のインデックスの助けを借りてJavaScriptによって参照できる一意のIDがあることがわかっています。

document.getElementById('quantity'+i).value 

同じ。最後に計算された値が正しいフィールドに保存されてdocument.getElementById('packing_value'+i).value

のために行く：（http://phpfiddle.org/で実行可能）

document.getElementById('quantity_konversi'+i).value = hitung; 

FULL CODE：

<script> 
     function subtotal(konversi){ 
      console.log('subtotal function'); 
      for(var i = 1; i < 5+1; i++){ 
       //console.log('quantity'+i, document.getElementById('quantity'+i).value); 
       //console.log('packing_value'+i, document.getElementById('packing_value'+i).value); 
       var hitung = (document.getElementById('quantity'+i).value * document.getElementById('packing_value'+i).value); 
       //document.forms.demoform.quantity_konversi.value = hitung; 
       document.getElementById('quantity_konversi'+i).value = hitung; 
       console.log(i, hitung); 
      } 
     } 
    </script> 
<form id='demoform'> 
<?php 
    $jumlah=5; 
    for($i=0; $i<$jumlah; $i++){ 
     $nomor = $i + 1;  
     echo"$nomor"; 
?> 

     <input type='text' name='quantity[]' id='quantity<?php echo"$nomor"; ?>' onkeyup="subtotal();"> 
     X 
     <input type='text' id="packing_value<?php echo"$nomor"; ?>" value='10' onkeyup="subtotal();"> 

     <input type='text' name='quantity_konversi[]' id='quantity_konversi<?php echo"$nomor"; ?>' placeholder='result ???'><br/> 
<?php 

    } //for end 
    $nomor++ 
?> 

</form>