javascriptjquerybootstrap-modal
Why does javascript onchange event only work in first row update from a data table
From within the first modal (opened from the first table row's 'Edit' button) the autosum is triggered no problem - in the modal window linked to the first row.
But if I click on any other row's 'Edit' button to launch it's modal - and then I change number the 'select' input value, the alert(x1) shows data from first row table(id=27) - as if the javascript function is not being processed but the id(28) is passed to the modal.
I tried find the solutions in stackoverflow..but i don't find any solutions..please helps me.
i will show the codes
Button to Modal
<a href="#" data-id="{{$devStatus->devID}}" class="badge badge-info" data-toggle="modal" data-target="#modalEdit{{$devStatus->devID}}"><i class=" far fa-edit"></i> Edit</a>
Modal Edit Data
<div class="modal fade" id="modalEdit{{$devStatus->devID}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Device Details Status</h5>
{{$devStatus->devID}}
</div>
<form action="{{ route('recall.updateDeviceStatus',[$devStatus->devID]) }}" name="totalUpdate" id="totalUpdate" enctype="multipart/form-data" method="post" class="needs-validation" novalidate>@csrf
{{method_field('PUT')}}
<div class="modal-body">
<input type="text" class="form-control" id="application_id" name="application_id" value="{{ $application_id }}" hidden readonly>
<input type="text" class="form-control" id="device_id" name="device_id" value="{{ $device_id }}" hidden readonly>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">1. Product Number / <br>Catalogue Number: </label>
<div class="col-9 col-lg-7">
<input type="text" class="form-control" name="final_devProductNum" id="final_devProductNum" value="{{$devStatus->devID}}" >
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">2. Lot / Serial No: </label>
<div class="col-9 col-lg-7">
<input type="text" class="form-control" name="final_devBatchNo" id="final_devBatchNo"value="{{$devStatus->final_devBatchNo}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">3. Quantity remaining in <br>warehouse: <b>(x)</b></label>
<div class="col-9 col-lg-7">
<input type="number" class="form-control " placeholder="unit" min="0" name="final_devQuantityWarehouse" id="final_devQuantityWarehouse2" value="{{$devStatus->final_devQuantityWarehouse}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">4. Quantity Recalled: <b>(a)</b></label>
<div class="col-9 col-lg-7">
<input type="number" class="form-control " placeholder="unit" min="0" name="final_devQuantityRecalled" id="final_devQuantityRecalled2"value="{{$devStatus->final_devQuantityRecalled}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">5. Quantity consumed <br>by customers:<b>(b)</b> </label>
<div class="col-9 col-lg-7">
<input type="number" class="form-control " placeholder="unit" min="0" name="final_devQuantityCust" id="final_devQuantityCust2"value="{{$devStatus->final_devQuantityCust}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">6. Quantity Unindentified: <b>(c)</b></label>
<div class="col-9 col-lg-7">
<input type="number"class="form-control " placeholder="unit" min="0" name="final_devQuantityUnidentified" id="final_devQuantityUnidentified2"value="{{$devStatus->final_devQuantityUnidentified}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">7. Quantity Disposed: <b>(p)</b></label>
<div class="col-9 col-lg-7">
<input type="number" class="form-control " placeholder="unit" min="0" name="final_devQuantityDisposed" id="final_devQuantityDisposed2"value="{{$devStatus->final_devQuantityDisposed}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">8. Quantity Returned to <br> Manufacturer: <b>(q)</b></label>
<div class="col-9 col-lg-7">
<input type="number" class="form-control " placeholder="unit" min="0" name="final_devQuantityReturned" id="final_devQuantityReturned2"value="{{$devStatus->final_devQuantityReturned}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">9. Total affected unit: <br> <b>(z=x+y)</b></label>
<div class="col-9 col-lg-7">
<input class="form-control" name="final_devAffectedUnit" id="final_devAffectedUnit2" value="{{$devStatus->final_devAffectedUnit}}" readonly >
<h6 style="color:red;font-family:italic;">* Auto Sum based on user input</h6>
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label ">10. Quantity sold:<br><b>(y=a+b+c)</b> </label>
<div class="col-9 col-lg-7">
<input class="form-control" name="final_devQuantitySold" id="final_devQuantitySold2" value="{{$devStatus->final_devQuantitySold}}" readonly >
<h6 style="color:red;font-family:italic;">* Auto Sum based on user input</h6>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
<button type="reset" value="Reset" class="btn btn-primary">Clear</button>
<button data-id="{{$devStatus->devID}}" type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
Javascript
<script>
$(document).ready(function(){
$(document).on('change', "#totalUpdate", function(){
var a1 = Number($('#final_devQuantityRecalled2').val());
var b1 = Number($('#final_devQuantityCust2').val());
var c1 = Number($('#final_devQuantityUnidentified2').val());
var x1 = Number($('#final_devQuantityWarehouse2').val());
alert(x1);
var y1 = a1 + b1 + c1 ;
var z1 = x1 + y1 ;
$('#final_devQuantitySold2').val(y1);
$('#final_devAffectedUnit2').val(z1);
});
});
</script>
I also try the on change function on the modal..but the output is undefined :(. Heres is my code
Modal edit Data
<form action="{{ route('recall.updateDeviceStatus',[$devStatus->devID]) }}" name="totalUpdate" id="totalUpdate<?= $devStatus['devID']?>" enctype="multipart/form-data" method="post" class="needs-validation" onchange="show_value('totalUpdate<?= $devStatus['devID']?>')" novalidate>@csrf
{{method_field('PUT')}}
onchange function javascript
<script>
function show_value(getTotal) {
selected_value = document.getElementById(getTotal).value;
alert(selected_value);
}
</script>
alert(selected_values)
Solution
The issue might be that you're reusing ID tags. Hard to tell, but you can try this method. It finds the form elements relative to the select menu's form.
$(document).ready(function() {
$(document).on('change', "#totalUpdate", function() {
let form = $(this).closest('form')
let a1 = Number(form.find('[name=final_devQuantityRecalled2]').val());
let b1 = Number(form.find('[name=final_devQuantityCust2]').val());
let c1 = Number(form.find('[name=final_devQuantityUnidentified2]').val());
let x1 = Number(form.find('[name=final_devQuantityWarehouse2]').val());
let y1 = a1 + b1 + c1;
let z1 = x1 + y1;
$('#final_devQuantitySold2').val(y1);
$('#final_devAffectedUnit2').val(z1);
});
});
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices