为什么 javascript onchange 事件仅适用于数据 table 的第一行更新
Why does javascript onchange event only work in first row update from a data table
从第一个模式（从第一个 table 行的 'Edit' 按钮打开）触发自动求和没问题 - 在链接到第一行的模式 window 中。
但是，如果我单击任何其他行的 'Edit' 按钮以启动它的模态 - 然后我更改 'select' 输入值的编号，警报 (x1) 会显示第一行的数据 table(id=27) - 就好像 javascript 函数没有被处理但是 id(28) 被传递给模态。
我尝试在 Whosebug 中找到解决方案..但我没有找到任何解决方案..请帮助我。
我会显示代码
按钮到模式
<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>
模态编辑数据
<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>
我也尝试了模态上的 on change 函数..但是输出是未定义的:(。这是我的代码
模态编辑数据
<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 函数javascript
<script>
function show_value(getTotal) {
selected_value = document.getElementById(getTotal).value;
alert(selected_value);
}
</script>
警报(selected_values)
问题可能是您重复使用了 ID 标签。很难说，但你可以试试这个方法。它找到与 select 菜单表单相关的表单元素。
$(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);
});
});
从第一个模式（从第一个 table 行的 'Edit' 按钮打开）触发自动求和没问题 - 在链接到第一行的模式 window 中。
但是，如果我单击任何其他行的 'Edit' 按钮以启动它的模态 - 然后我更改 'select' 输入值的编号，警报 (x1) 会显示第一行的数据 table(id=27) - 就好像 javascript 函数没有被处理但是 id(28) 被传递给模态。
我尝试在 Whosebug 中找到解决方案..但我没有找到任何解决方案..请帮助我。
我会显示代码
按钮到模式
<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>
模态编辑数据
<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>
我也尝试了模态上的 on change 函数..但是输出是未定义的:(。这是我的代码
模态编辑数据
<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 函数javascript
<script>
function show_value(getTotal) {
selected_value = document.getElementById(getTotal).value;
alert(selected_value);
}
</script>
警报(selected_values)
问题可能是您重复使用了 ID 标签。很难说，但你可以试试这个方法。它找到与 select 菜单表单相关的表单元素。
$(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);
});
});