我正在使用 javascript 函式輸入一個數字并在 boostrap 模態內計算后自動顯示結果。
如果單擊第一行的請求按鈕，javascript 功能運行良好。但是當我點擊第二行和后續行的請求按鈕時，它不起作用。
我不太確定問題是模態內的資料還是模態外的資料
我試圖 getElementsByClassName 而不是 ID，但它仍然無法正常作業。
<script>
function mult(value) { // === calculate the profit and the total amount due === //
var x = value * 15 / 100;
var y = parseFloat(x) parseInt(value);
document.getElementById("profit").value = x;
document.getElementById("total").value = y;
}
</script>
<table id="table1">
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>Requests</th>
</tr>
</thead>
<tbody>
@foreach($Clients as $Client)
<tr id="foreach-row">
<td>{{ $Client->full_name }}</td>
<td>
<div class="buttons">
<a class="btn icon btn-secondary" data-toggle="modal"
data-target="#LoanRequestModel-{{ $Client->id }}">
Request
</a>
</div>
</td>
</tr>
{{-- =========== MODEL - NEW REQUEST ===============--}}
<div class="modal" id="LoanRequestModel-{{ $Client->id }}" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>REQUEST</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<form action="{{ route('finance.storeRequest', $Client->id) }}" method="post"
class="loanrequest_form" enctype="multipart/form-data">
{{ csrf_field() }}
<label>Full name</label>
<div class="form-group">
<input type="text" name="creditor_full_name"
class="form-control" value="{{ $Client->full_name }}" >
</div>
<div>
<label>Amount</label>
<div class="form-group">
<input type="number" name="loan_amount"
class="form-control" onkeyup="mult(this.value);" >
</div>
</div>
<div class="row">
<div class="col-md-5">
<label>Interest Rate</label>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Choose</label>
<select class="form-select rate"name="interest_rate" >
<option value="15" selected>15%</option>
<option value="20">20%</option>
</select>
</div>
</div>
<div class="col-md-7">
<label>Profit</label>
<div class="input-group mb-3">
<input type="text" id="profit" class="form-control" name="profit"
aria-label="Amount">
</div>
</div>
</div>
<div class="row">
<label>Total Amount due</label>
<div class="input-group mb-3">
<input type="text" id="total" class="form-control" name="amount_due"
aria-label="Amount">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-secondary ml-1" >
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Submit</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endforeach
</tbody>
</table>
uj5u.com熱心網友回復：
問題 - 正如上面其他人所說 - 是當您使用以下方法使每個模態的 ID 唯一時：
id="LoanRequestModel-{{ $Client->id }}"
在您的回圈中，在生成每個模態時，您使用的是具有非唯一 ID 的欄位：
type="text" id="profit"
type="text" id="total"
您最好將這些 ID 設定為非唯一的，就像您對模態 ID 所做的一樣：
type="text" id="profit-{{ $Client->id }}"
type="text" id="total-{{ $Client->id }}"
并添加標識到你需要在你的腳本中使用不具備目前一個領域：
type="number" id="loan_amount-{{ $Client->id}}" name="loan_amount"
然后，當您在此處在 keyup 上觸發 javascript 時：
onkeyup="mult(this.value);"
而不是傳遞欄位的值，傳遞客戶端 ID：
onkeyup="mult({{ $Client->id);"
然后你只需要調整你的 javascript（因為它不再被傳遞貸款金額），以便它首先獲得貸款金額，然后是它需要的其他零碎部分，最后將它們回傳到正確的位置：
<script>
function mult(id) { // === this is now receiving the ID, not a value so first we need to get the value for the relevant field *emphasized text*== //
var value = document.getElementById("loan_amount-" id).value
var x = value * 15 / 100;
var y = parseFloat(x) parseInt(value);
document.getElementById("profit" id).value = x;
document.getElementById("total" id).value = y;
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367071.html
標籤：javascript html 拉拉维尔 引导模式
上一篇：在父模型中排序