Quantità riempimento automatico

Question

Ho questa funzione divisa che posso aggiungere più campi facendo clic sul pulsante. Il mio problema è che se aggiungo un campo non riesco a ottenere l'importo esatto e restituisco l'importo se rimuovo il campo.

Esempio Scenario:

L'immagine sopra mostra la quantità iniziale -1,000.50. Ora questi sono i miei problemi.

1. I ingresso 50 nella quantità di primo campo che risulta Payee: 1 [-950.50] l'importo rimanente per beneficiario. Quando aggiungo un altro campo è automatico riempire l'importo e mi aspetto -950.50 perché è l'importo residuo. Ma quello che ottengo è l'importo iniziale -1,000.50 nel secondo campo. Come ottenere l'importo rimanente aggiornato?

2. Se rimuovo il campo aggiunto, desidero aggiungere nuovamente l'importo. Per es. se il campo ha 50 e l'importo residuo è -950.50. Se rimuovo il campo che contiene l'importo di 50, deve essere aggiunto di nuovo nell'importo rimanente e sarà -1,000.50. Come aggiungere l'importo?

Ecco che cosa ho provato:

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. Come ottenere l'importo residuo aggiornato? Si sta calcolando remain_amount su documento pronto, invece di quando si fa clic sul pulsante Aggiungi. È necessario spostare il calcolo all'interno del gestore di clic per #addScnt. Basta fare la prima riga di quella funzione e dovrebbe ricalcolare di conseguenza.

2. Come aggiungere l'importo? Possiamo farlo leggendo il valore dal campo di input che stiamo rimuovendo. Ecco il gestore dei clic per la rimozione modificato da dimostrare.

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

nota che, dato il mio approccio ad ottenere il valore rimosso, si potrebbe essere in grado di sbarazzarsi della logica che coinvolge i se non si ha altro lavoro da fare. Considera la ricerca nel DOM in base all'elemento che stai rimuovendo. Questo è probabilmente più lento da eseguire, ma non in modo irragionevole. È una tua scelta e non dovrebbe importare troppo. Penso che il mio suggerimento sia più facile da mantenere, e se dovessi ottimizzare ci sono altri aspetti di questa pagina che meritano più attenzione.

Mi raccomando anche di creare un jsFiddle funzionale in futuro, il tuo problema sarebbe stato molto più facile da testare e risolvere con un esempio funzionante.Ho provato a crearne uno, ma ho dovuto modificare l'HTML e JavaScript in modo significativo, in quanto mancano funzioni JavaScript nell'origine che hai fornito.

Mi auguro che aiuta! Sentiti libero di fare qualsiasi domanda riguardante la mia risposta, ma per favore non estendere l'ambito del tuo problema originale.