選択したオプション値に基づいて入力値を取得する方法は？

Question

私は（リンクを開く）このようなダイナミックな入力フォームがありますthis is the form

オプション値が「デビット」と「Kredit」です。

私の場合は、選択したオプションに基づいてJumlahの値を取得したいと考えています。その写真に見られるように、最初の行でJumlahの値を10で入力してから、私は "Debit"を選択しますので、総借方金額は10に変わり、総クレジット値はまだ0に変わります。

次の行では、私はJumlahの値を3で入力し、次に私は "Kredit"を選択します。したがって、合計借方の値は10になり、総クレジットは3に変わります。

次に、総借方は13、総クレジットは0ですが、総借方は13、総クレジットは3となります。

これを解決するにはどうすればよいですか？任意の提案や別の選択肢？ここで

は自分のフォームのコードです：

<form action="" method="post"> 
    {{ csrf_field() }} 
    <div class="form-group"> 
    <label for="nojurnal">Nomor Jurnal:</label> 
    <input type="text" class="form-control" id="nojurnal" value="{{ $noJurnal+1 }}" name="no_jurnal" readonly> 
    </div> 
    <div class="form-group"> 
    <label for="tgljurnal">Tanggal Jurnal:</label> 
    <input type="date" class="form-control" id="tgljurnal" name="tgl_jurnal"> 
    </div> 
    <div class="form-group"> 
    <label for="keterangan">Keterangan:</label> 
    <textarea name="keterangan_jurnal" id="keterangan" class="form-control" rows="8" cols="80"></textarea> 
    </div> 
    <hr> 
    <div class="form-group table-responsive"> 
    <table class="table table-striped"> 
     <thead> 
     <th>Nomor Rekening</th> 
     <th>Nama Rekening</th> 
     <th>Keterangan</th> 
     <th>Jumlah</th> 
     <th>Jenis Rekening</th> 
     <th></th> 
     </thead> 
     <tbody class="tabel-body"> 
     <tr class="row-rekening"> 
      <td> 
      <div class="form-group"> 
       <select class="form-control kodeRekening" name="kode_rekening[]"> 
       @foreach($rekenings as $rekening) 
        <option class="listKodeRekening" value="{{ $rekening->kode_rekening }}" nm="{{ $rekening->nama_rekening }}">{{ $rekening->kode_rekening }}</option> 
       @endforeach 
       </select> 
      </div> 
      </td> 
      <td> 
      <div class="form-group"> 
       <input class="form-control namaRekening" type="text" name="" value="" readonly> 
      </div> 
      </td> 
      <td> 
      <div class="form-group"> 
       <input class="form-control keterangan" type="text" name="keterangan[]" value=""> 
      </div> 
      </td> 

      <td> 
      <div class="form-group"> 
       <input class="form-control jumlahDK" type="text" name="jumlah[]" value=""> 
      </div> 
      </td> 

      <td> 
      <div class="form-group"> 
       <select class="form-control jenisRekening" name="d_k[]"> 
       <option value="">-- Pilih --</option> 
       <option value="D" class="debit">Debit</option> 
       <option value="K" class="kredit">Kredit</option> 
       </select> 
      </div> 
      </td> 

      <td> 
      <div class="form-group"> 
       <button type="button" class="form-control glyphicon glyphicon-plus btn-success more-input" name="button"></button> 
      </div> 
      </td> 
     </tr> 

     </tbody> 
    </table> 

    </div> 

    <div class="form-group col-sm-12"> 
    <label for="total-debit" class="col-sm-2">Total Debit</label> 
    <span class="col-sm-4"><input type="text" id="jumlah-debit" class="form-control" name="" value="" readonly></span> 
    </div> 

    <div class="form-group col-sm-12"> 
    <label for="total-kredit" class="col-sm-2">Total Kredit</label> 
    <span class="col-sm-4"><input type="text" id="jumlah-kredit" class="form-control" name="" value="" readonly></span> 
    </div> 

    <input type="submit" class="btn btn-success" value="Simpan"> 
</form> 

そして、これは私のjavascriptのコードです：

$(document).on('change', '.jenisRekening', function(e){ 
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){ 
    totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val()) 
} 
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){ 
    totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val()) 
} 
$('#jumlah-debit').val(totalDebit) 
$('#jumlah-kredit').val(totalKredit) 

}）;

Answer 1

変数totalDebitとtotalCreditは、再計算する前にjQueryコードでゼロに再初期化する必要があります。彼らの古い価値が保持されていると思われるので、簡単な解決策は次のようになります：

$(document).on('change', '.jenisRekening', function(e){ 
    totalDebit = 0; 
    totalKredit = 0; 

    if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){ 
     totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val()); 
    } 
    else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){ 
     totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val()); 
    } 

    $('#jumlah-debit').val(totalDebit); 
    $('#jumlah-kredit').val(totalKredit); 
});