JavascriptとPHPを使用してフィールドの結果を取得

Question

データベースから行を取得するページがあります。

行を取得した後、注文数量を入力する必要があります。

システムは自動的にDBの数量と注文数量の差を計算し、残高を残高項目に入れます。これは処理後にDBに保存されるすべての項目に対して実行する必要があります。

私は以下のコードを試しましたが、これは最初の行だけで、残りの行は動作しませんでした。コードとアドバイスを参照してください。

HTMLコード：

<tr> 
    <td> 
     <input type="text" name="qnty[]" value="<?php echo $r['qty'];?>" id="qty"/> 
    </td> 
    <td nowrap="nowrap"><input type="text" name="oqty[]" placeholder="Qty Ordered" id="oqty" onblur="calbal();"/></td> 
    <td nowrap="nowrap"><input type="text" name="obal[]" placeholder="Qty Ordered" id="bal" readonly="readonly"/></td> 
</tr> 

Javascriptのコード：

<script type="text/javascript"> 
    function calbal(){ 
    var qty = document.getElementById("qty").value; 
    var oqty = document.getElementById("oqty").value; 
    var bal = qty-oqty; 
    document.getElementById("bal").value=bal; 
    //document.getElementById("bal").focus(); 
    } 
</script> 

私はonBlurイベントにそれぞれ応答するが、最初の行だけが行うべきである10行、のように持っています。

Answer 1

添付のスニペットをご覧ください。

あなたのコードは、より良い出力のために変更が必要な場合があります。各テキストボックスをidを使って一意にする。

function calbal(id){ 
 
    
 
    var qty = document.getElementById("qty_"+id).value; 
 
    var oqty = document.getElementById("oqty_"+id).value; 
 
    var bal = qty-oqty; 
 
    document.getElementById("bal_"+id).value=bal; 
 
    //document.getElementById("bal").focus(); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
     <input type="text" name="qnty[]" value="11" id="qty_1"/> 
 
    </td> 
 
    <td nowrap="nowrap"> 
 
     <input type="text" name="oqty[]" placeholder="Qty Ordered" id="oqty_1" onblur="calbal(1);"/></td> 
 
    <td nowrap="nowrap"><input type="text" name="obal[]" placeholder="Qty Ordered" id="bal_1" readonly="readonly"/></td> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
     <input type="text" name="qnty[]" value="12" id="qty_2"/> 
 
    </td> 
 
    <td nowrap="nowrap"><input type="text" name="oqty[]" placeholder="Qty Ordered" id="oqty_2" onblur="calbal(2);"/></td> 
 
    <td nowrap="nowrap"><input type="text" name="obal[]" placeholder="Qty Ordered" id="bal_2" readonly="readonly"/></td> 
 
</tr> 
 

 

 
<tr> 
 
    <td> 
 
     <input type="text" name="qnty[]" value="13" id="qty_3"/> 
 
    </td> 
 
    <td nowrap="nowrap"><input type="text" name="oqty[]" placeholder="Qty Ordered" id="oqty_3" onblur="calbal(3);"/></td> 
 
    <td nowrap="nowrap"><input type="text" name="obal[]" placeholder="Qty Ordered" id="bal_3" readonly="readonly"/></td> 
 
</tr>