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

时间:2017-04-10 15:12:32

标签: javascript jquery ajax

  

我有一个像这样的动态输入表单(打开链接):this is the form

选项值为“借记”和“Kredit”。

在我的情况下,我想根据选择的选项获得Jumlah的价值。如图所示,在第一行中,我输入Jumlah的值为10,然后选择“借记”,因此总借记值将更改为10,总Kredit值仍为0.

然后,在下一行中,我输入Jumlah的值为3,然后我选择“Kredit”,因此总借记值仍为10,总Kredit变为3.

然后,当我将第二行更改为借记时,总借记应为13而总则为Kredit为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)

});

1 个答案:

答案 0 :(得分:0)

变量totalDebittotalCredit应该在重新计算之前在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); 
});