如何根据选择的选项值获取输入值？

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); 
});