我只需要计算表字段(harga_obat * jumlah)中foreach的选定复选框
这是我的foreach数据
@foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
@endforeach
这是我尝试过的方法,仅适用于下图所示的一行
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total').value = hasil;
}
}
答案 0 :(得分:0)
您只能在页面中使用一次ID,即ID =标识符,因此您可以使用对象ID来确保其唯一性并将其传递给sum
函数
例如
@foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga-{{ $o->id }}" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="jumlah-{{ $o->id }}" type="text" class="form-control" name="jumlah" onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="total-{{ $o->id }}" type="text" class="form-control total-harga" name="total_harga"
onkeyup="sum({{ $o->id }})" readonly>
</td>
</tr>
@endforeach
<script>
function sum(id) {
var harga = document.getElementById('harga-' + id).value;
var jumlah = document.getElementById('jumlah-' + id).value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total-' + id).value = hasil;
}
}
</script>
希望这会有所帮助
答案 1 :(得分:0)
由于要进行多行发送,因此不能依赖唯一的ID。一种(模糊的?)解决方案是为每行定义动态的不同ID,并将该ID传递给您的sum
方法。
另一种解决方案是使用一种更通用的方法,将sum
方法绑定到每一行,并将其传递给父范围,这仅适用于现有的id,如下所示:
function sum(parent) {
var harga = parent.querySelector('[name="harga_obat"]').value;
var jumlah = parent.querySelector('[name="jumlah"]').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
parent.querySelector('[name="total_harga"]').value = hasil;
}
}
function bind(el) {
el.addEventListener('keyup', function (event) {
sum(event.currentTarget.closest("tr"));
});
}
document.querySelectorAll('[name="harga_obat"]').forEach(function (element) {
bind(element);
});
document.querySelectorAll('[name="jumlah"]').forEach(function (element) {
bind(element);
});
<table>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
</table>