減去總額從first_amount

Question

在這個下面的代碼我想計算剩餘的餘額進入餘額字段。這裏我使用動態添加文本字段，我想添加以前添加的文本字段值+當前值加法並將其減去total_amount。請幫我

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
\t <script type="text/javascript"> 
 
var rowCount = 1; 
 
function addMoreRows(frm) { 
 
rowCount ++; 
 
var recRow = '<p id="rowCount'+rowCount+'"><input name="first_service[] '+rowCount+'" value="Payment '+rowCount+'" type="text" size="15" /> <input name="first_amount[]" id="first_amount" type="text" size="10"/> <input name="first_date[]" type="date" /> <select name="paid[]"> <option value="paid">Paid</option> <option value="unpaid">UnPaid</option></select><a href="javascript:void(0);" onclick="removeRow('+rowCount+');"><input type="button" value="-"></a></p>'; 
 
jQuery('#addedRows').append(recRow); 
 
} 
 

 
function removeRow(removeNum) { 
 
jQuery('#rowCount'+removeNum).remove(); 
 
} 
 
</script> 
 
<script type="text/javascript"> 
 

 

 
\t \t \t function calc() { 
 
\t \t \t \t 
 
var total_amount = document.getElementById('total_amount').value; 
 
    var first_amount = document.getElementById('first_amount').value; 
 

 
var balance=(total_amount-first_amount); 
 

 
\t document.getElementById('balance').value =balance; 
 
} 
 
\t \t </script>

<table bgcolor="#FFFFFF" align="center" width="68%" height="100" border="0" cellpadding="2" cellspacing="5"> 
 
\t \t \t <br><br> 
 
\t \t \t  <tr> 
 
        <td align='right'>Company_Name</td> 
 
\t \t \t \t \t <td>    
 
        <input name="company_name" type="text" value="<?php echo $company_name;?>" /> 
 
       </td> 
 
       </tr> 
 
\t \t \t \t 
 
       </tr> 
 
\t \t \t \t <tr > 
 
        <td align="right">Service_Name </td> 
 
\t \t \t \t <td> 
 
        <input type="text" name="service" value="<?php echo $service;?>"/> 
 
        </td> 
 
       </tr> 
 
\t \t \t \t <tr > 
 
        <td align="right">Payment_Type </td> 
 
\t \t \t \t <td> 
 
        <input type="text" name="first_service" value="<?php echo $first_service;?>"/> 
 
        </td> 
 
\t \t \t \t  </tr> 
 
       <tr > 
 
        <td align="right">Payment</td> 
 
\t \t \t \t <td> 
 
        <input type="text" id="first_amount" name="first_amount" value="" autocomplete="off" onkeyup="calc();"/> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </td>        \t 
 
\t \t \t \t \t 
 
       </tr> 
 
       
 
\t \t \t \t <tr > 
 
        <td align="right">Payment_Date </td> 
 
\t \t \t \t <td> 
 
        <input type="date" name="first_date" value="<?php echo $first_date;?>"/> 
 
        </td> 
 
       </tr> 
 
\t \t \t \t <tr > 
 
\t \t \t \t <td align="right">Balance_Due </td> 
 
\t \t \t \t <td> 
 
       <input type="text" id="balance" name="balance" value="" onkeyup="calc();"/> 
 
\t \t \t \t <td><select name="paid"> 
 
\t \t \t \t <option value="paid">paid</option> 
 
\t \t \t \t <option value="unpaid">unpaid</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t </td> 
 
            
 
\t \t \t \t </td> 
 
       </tr> 
 
\t \t \t \t 
 
\t \t \t \t <tr > 
 
        <td align="right">Total_Amount </td> 
 
\t \t \t \t <td> 
 
        <input type="text" id="total_amount" name="total_amount" value="<?php echo $total_amount;?>"/> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td><td class="link"><input type="submit" name="Update" value="Update" /> <a href="payment_details.php?company_name=<?php echo $company_name;?>">Cancel</a> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
\t \t \t </div> 
 
      </form>

<td><input type="text" name="first_service[]" value="Payment 1" size="15" > 
<input type="text" name="first_amount[]" id="first_amount" placeholder="Amount" size="10" onkeyup="calc()"> 
<input type="date" name="first_date[]" size="20"> <select name="paid[]" ><option value="paid">Paid</option><option value="unpaid">UnPaid</option></select> <input type="button" value="+" onclick="addMoreRows(this.form);"> 
<div id="addedRows"></div> 

Answer 1

根據您的addMoreRows功能，您可以添加將包含first_amount值超過一個元素。您在名稱中使用first_amount[]以保持數組中的所有first_amount值，但對於所有錯誤均使用相同的ID。 ID必須在HTML中唯一。所以首先解決這些問題。

然後在腳本中首先獲取長度爲first_amount的元素，然後添加它們的值。然後做任何你想做的事情。