'My auto calcutale js only work on first row modal
i have a problem make me confused. i'm trying to make a form that can do auto calculate on input change, that form is in a modals on my data table, its look like this:
here my code for my datatable
<?php
$no=0;foreach($det_order as $b){
$p_id = $b->parent_id;
if($p_id == $prn_id){
$no++;
$id=$b->id;
$item=$b->item;
$desc=$b->desc;
$qty=$b->qty;
$hj= $b->jual;
$tot=$b->total;
?>
<tr>
<td><?=$no?></td>
<td><?=$item?></td>
<td><?=$desc?></td>
<td><?=$qty?></td>
<td><?=number_format($hj)?></td>
<td class="total"><?=number_format($tot);?></td>
<td>
<div class="btn-toolbar d-inline-block " role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group btn-group-rounded" role="group"
aria-label="First group">
<button type="button" class="btn btn-outline-light"
data-toggle="modal"
data-target="#modaledit_item2<?= $id ?>">
<a data-toggle="tooltip" data-placement="top"
title="Edit"><i
class="icon-pencil"></i></a></button>
<button type="button" class="btn btn-outline-light"
data-toggle="modal"
data-target="#modaldel_item<?= $id ?>">
<a data-toggle="tooltip" data-placement="top"
title="Hapus"><i
class="icon-trash"></a></i></button>
</div>
</div>
</td>
</tr>
<?php }
}
endforeach;
?>
beside the data i put 2 button that direct to some modals for edit and delete, delete modal is work well, but i want to make my edit modals can do auto calculate the total price on input change here my modal look:
<?php
foreach($det_order as $i){
$id=$i->id;
$order_id=$i->order_id;
$prn_id=$i->parent_id;
$ref=$i->is_parent;
$item=$i->item;
$desc=$i->desc;
$sat=$i->satuan;
$qty=$i->qty;
$hb=$i->beli;
$tb=$i->tb;
$hj= $i->jual;
$tj=$i->total;
?>
<div class="modal fade" id="modaledit_item2<?= $id ?>" tabindex="-1" role="dialog" aria-labelledby="modaltambah"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">edit Item by Parent</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?= base_url('cart/edit_data_order')?>" method="POST">
<div class="form-row mb-10">
<div class="col-md-2">
parent<input class="form-control" id="" name="prn_id" type="text" value="<?= $prn_id?>" disabled>
</div>
<div class="col-md-2">
order<input class="form-control" id="" name="order_id" type="text" value="<?= $order_id?>" disabled>
</div>
<div class="col-md-8">
Reff<input class="form-control" id="" name="ref" type="text" value="<?= $ref?>" disabled>
</div>
</div>
<div class="form-group">
<label>Nama Item</label>
<input class="form-control" id="" name="item" type="text" value="<?=$item?>">
</div>
<div class="form-group">
<label>Deskripsi</label>
<textarea name="desc" class="form-control" id="" cols="3" rows="1"><?=$desc?></textarea>
</div>
<div class="form-row mb-10">
<div class="col-md-6">
<label>Qty</label>
<input class="form-control" id="eqty" name="qty" type="text" value="<?= $qty ?>">
</div>
<div class="col-md-6">
<label>Satuan</label>
<select name="satuan" class="form-control custom-select" id="satuan">
<option value="unit">unit</option>
<option value="unit">unit</option>
<option value="m">meter</option>
<option value="pcs">pcs</option>
<option value="ls">ls</option>
<option value="core">core</option>
<option value="core">paket</option>
</select>
</div>
</div>
<div class="form-row mb-10">
<div class="col-md-6">
<label>HB</label>
<input class="form-control" id="ehb" name="hb" type="text" value='<?=$hb?>'>
</div>
<div class="col-md-6">
<label>TB</label>
<input class="form-control" id="etb" name="tb" type="text" value='<?=$tb?>'>
</div>
</div>
<div class="form-group">
<label>@ Harga</label>
<input class="form-control" id="ehj" name="hj" type="text"value='<?=$hj?>'>
</div>
<div class="form-group">
<label>Total</label>
<input class="form-control" id="etj" name="tj" type="text"value='<?=$tj?>'>
</div>
<hr>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
so if i change the qty, the tb input and total do auto calculate, but unfortunately its only work on first row on my tables this my javascript for do calculate
<script>
$(document).ready(function(){
$('#ehb').on('input', function() {
var qty = $('#eqty').val();
var hb = $('#ehb').val();
var tot = qty * hb;
$('#etb').val(tot);
});
$('#ehj').on('input', function() {
var qty = $('#eqty').val();
var hj = $('#ehj').val();
var tot = qty * hj;
$('#etj').val(tot);
});
$('#eqty').on('input', function() {
var qty = $('#eqty').val();
var hb = $('#ehb').val();
var hj = $('#ehj').val();
var tot_b = qty * hb;
var tot_j = qty * hj;
$('#etb').val(tot_b);
$('#etj').val(tot_j);
});
});
so maybe someone can help me with this because its only work on edit modal in first row on my table, the second row and next row is not working on change my input hope someone can help thanks
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|