在下面的代码中,我想计算进入余额字段的剩余余额。这里我使用动态添加文本字段,我想添加以前添加的文本字段值+当前值加法和减去total_amount。请帮帮我
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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">
function calc() {
var total_amount = document.getElementById('total_amount').value;
var first_amount = document.getElementById('first_amount').value;
var balance=(total_amount-first_amount);
document.getElementById('balance').value =balance;
}
</script>
<table bgcolor="#FFFFFF" align="center" width="68%" height="100" border="0" cellpadding="2" cellspacing="5">
<br><br>
<tr>
<td align='right'>Company_Name</td>
<td>
<input name="company_name" type="text" value="<?php echo $company_name;?>" />
</td>
</tr>
</tr>
<tr >
<td align="right">Service_Name </td>
<td>
<input type="text" name="service" value="<?php echo $service;?>"/>
</td>
</tr>
<tr >
<td align="right">Payment_Type </td>
<td>
<input type="text" name="first_service" value="<?php echo $first_service;?>"/>
</td>
</tr>
<tr >
<td align="right">Payment</td>
<td>
<input type="text" id="first_amount" name="first_amount" value="" autocomplete="off" onkeyup="calc();"/>
</td>
</td>
</tr>
<tr >
<td align="right">Payment_Date </td>
<td>
<input type="date" name="first_date" value="<?php echo $first_date;?>"/>
</td>
</tr>
<tr >
<td align="right">Balance_Due </td>
<td>
<input type="text" id="balance" name="balance" value="" onkeyup="calc();"/>
<td><select name="paid">
<option value="paid">paid</option>
<option value="unpaid">unpaid</option>
</select>
</td>
</td>
</tr>
<tr >
<td align="right">Total_Amount </td>
<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>
</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>
答案 0 :(得分:0)
根据您的addMoreRows
功能,您可以添加多个包含first_amount
值的元素。您在名称中使用first_amount[]
将所有first_amount
值保留在数组中,但对于所有错误使用相同的ID。 ID必须在HTML中是唯一的。所以首先解决这些问题。
然后在脚本中首先获取first_amount
元素的长度,然后添加它们的值。然后做你想做的事。