ボタンをクリックしてフィールドを追加できるこの分割機能があります。私の問題は、フィールドを追加すると正確な金額を取得できず、フィールドを削除すると金額が元に戻らないことです。
サンプル シナリオ:
上の画像は初期金額-1,000.50を示しています。今、これらは私の問題です。
50結果の最初のフィールドのPayee: 1 [-950.50]金額に、受取人の残額として入力します。別のフィールドを追加すると、金額が自動入力されます-950.50。それが残りの金額であるため、期待しています。しかし、私が得るのは-1,000.50、2 番目のフィールドの初期量です。更新された残りの金額を取得するにはどうすればよいですか?追加したフィールドを削除すると、金額を元に戻したいです。たとえば。フィールドに が
50あり、残量が の場合-950.50。金額を含むフィールドを削除する50と、残りの金額に戻す必要があり、それは になります-1,000.50。金額を戻す方法は？
これが私が試したことです：
split.html
<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'"
<caption> Payee: 1
[<span id="remaining">-1,000.50</span>]
</caption>
<tbody>
<tr>
<td class="week-end" id="p_scents"><br/>
*Note: Amount totals must equal transaction total and envelopes must be specified to
enable the split button.<br/><br/>
<p class="button-height">
<span class="input">
<label class="button orange-gradient">Envelope #1</label>
<select name="env[]" class="envelope select compact">
<option value="none">(Select)</option>
<optgroup label="Category">
<option value="1">Internet</option>
<option value="2">Savings</option>
</optgroup>
</select>
<input type="text" name="amt[]" placeholder="0.00" size="10"
id="validation-required" class="input-unstyled input-sep validate[required]"
onkeyup="calculate(0)">
<input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note">
</span>
<span class="with-tooltip">
<img src="{{STATIC_URL}}img/icons/tick.png" title="Default">
</span>
</p><br/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round">
Another Envelope
</a>
</td>
</tr>
</tfoot>
</table>
<script>
function calculate(difference) {
var sum = 0;
$(":text").each(function() {
amt = replaceCommaDollar(this.value);
if(!isNaN(amt) && amt.length!=0) {
sum += parseFloat(amt);
total = sum;
difference = -1,000.50 + total
}
});
$("#remaining").html(numberWithCommas(difference.toFixed(2)));
if(difference == 0){
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
}else{
$("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>");
}
}
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2);
$('#addScnt').live('click', function() {
$('<p class="button-height">'+
' <span class="input">'+
' <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' +
' <select name="env[]" class="envelope select compact">'+
' <option value="none" selected="selected">(Select)</option>' +
' <optgroup label="Category">' +
' <option value="1">Internet</option>' +
' <option value="2">Savings</option>' +
' </optgroup>' +
' </select>' +
' <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+
' <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+
' </span>'+
' <a href="javascript:{}" id="remScnt" class="with-tooltip">Remove</a></p><br/\>'
).appendTo(scntDiv);
$("#remaining").html('0.00');
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
test = $('#split-amount'+i).val();
alert(test);
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>