オートフィル額

Question

私はこのボタンをクリックすることでさらにフィールドを追加できます。私の問題は、フィールドを追加した場合、フィールドを削除すると正確な金額を得ることができず、額を戻すことができないということです。

サンプルシナリオ：

上記画像-1,000.50初期量を示しています。今はこれが私の問題です。

1. I受取人のための残量としてPayee: 1 [-950.50]に生じる最初のフィールドの量で入力50。私は別のフィールドを追加すると、それは自動的に量を埋めるので、それは残りの量ですので、-950.50を期待します。しかし、私が得るのは、第2フィールドに最初の額-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> 

Answer 1

1. を？追加ボタンをクリックする代わりに、remain_amountを文書の準備ができていると計算しています。 #addScntのクリックハンドラ内で計算を移動する必要があります。その関数の最初の行にするだけで、それに応じて再計算する必要があります。

2. 金額をどのように追加するのですか？削除する入力フィールドの値を読み取ることで、これを行うことができます。ここでは、変更された削除クリックハンドラを示します。

   $('#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; 
   }); 
   

あなたが行うには他の仕事を持っていない限り、削除された値を得るために私のアプローチを考えると、あなたはiを含むロジックを取り除くことができるかもしれないことに注意してください。削除する要素に基づいてDOMを検索することを検討してください。このはですが、実行が遅くなる可能性がありますが、不合理ではありません。それはあなたの選択ですが、どちらの方法でもそれほど重要ではありません。私は自分の提案が維持しやすいと思うし、もし私が最適化するなら、このページの他の側面がもっと注目に値する。

今後も機能するjsFiddleを作成することをお勧めします。機能的な例で問題をテストして解決するのがずっと簡単でした。作成しようとしましたが、提供したソースにJavaScript関数がないため、HTMLとJavaScriptをあまりにも大きく変更しなければなりませんでした。

私はそれが助けてくれることを願っています！私の答えに関する質問は自由ですが、元の問題の範囲を広げないでください。