Autofill Amount

Question

I have this split function which I can add more fields by clicking the button. My Problem are if I add a field I can't get the exact amount and back the amount if I remove the field.

Sample Scenario:

The above image show the initial amount -1,000.50. Now these are my problems.

1. I input 50 in the amount of first field which result to Payee: 1 [-950.50] as the remaining amount for payee. When I add another field it's auto fill the amount and I expect -950.50 because that's the remaining amount. But what I get is the initial amount -1,000.50 in the second field. How to get the updated remaining amount?

2. If I remove the added field I want to added back the amount. For ex. if the field has 50 and the remaining amount is -950.50. If I remove the field that contains amount of 50 it must be added back in the remaining amount and it will be -1,000.50. How to added back the amount?

Here are what I have tried:

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>

Answer 1

1. How to get the updated remaining amount? You are calculating remain_amount on document ready, instead of when you click the add button. You need to move its calculation within the click handler for #addScnt. Just make it the first line of that function and it should recalculate accordingly.

2. How to added back the amount? We can do this by reading the value out of the input field we are removing. Here is the modified remove click handler to demonstrate.

   $('#remScnt').live('click', function() {
       // Might not need the if statement
       if (i > 2) {
           //test = $('#split-amount' + i).val();
           //alert(test);
   
           var $p = $(this).parents('p');
   
           // Consider this approach to getting the removed value
           var textValue = $p.find('input[name="amt[]"]').val();
           var numValue = replaceCommaDollar(textValue);
   
           var $remaining = $("#remaining");
           var remainingValue = replaceCommaDollar($remaining.text());
           var difference = remainingValue - numValue;
   
           var newRemainingValue = numberWithCommas(difference.toFixed(2)))
           $("#remaining").text(newRemainingValue);
   
           $p.remove();
   
           // This might not be needed anymore
           i--;
       }
   
       return false;
   });
   

Note that given my approach to obtaining the removed value, you might be able to get rid of the logic involving i unless you have other work to do. Consider searching the DOM based on the element you're removing. This is probably slower to execute, but not unreasonably so. It's your choice though and it shouldn't matter too much either way. I think my suggestion is easier to maintain, and if I were to optimize there are other aspects of this page that deserve more attention.

I also recommend creating a functional jsFiddle in the future, your problem would have been much easier to test and solve with a functioning example. I tried creating one, but I had to alter the HTML and JavaScript too significantly, as there are missing JavaScript functions in the source you provided.

I hope that helps! Feel free to ask any questions regarding my answer, but please don't expand the scope of your original problem.