如何根據選擇的選項值獲取輸入值？

Question

我有這樣一個動態輸入形式（打開連接）：this is the form

選項值是「借記」和「Kredit」。

在我的情況，我想根據所選的選項得到Jumlah的價值。正如您在第一行中看到的，我輸入10的Jumlah值，然後選擇「Debit」，因此總借項值將變爲10，總Kredit值仍爲0.

然後，在下一行中，我輸入Jumlah的值爲3，然後選擇「Kredit」，因此總借項值仍然爲10，總共Kredit變爲3.

然後，當我將第二行更改爲借記時，總借記應該是13和總Kredit爲0。但是，它使總借記至13和總Kredit仍然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); 
});