JavaScript を使用して OnClick 機能を有効にしました。 しかし、最後のプロセス、つまり合計では、挿入したコードは反応しませんでした。
<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data -keyboard="false">
<div class="modal-dialog modal-lg">
<div class="モーダルコンテンツ">
<div class="モーダルヘッダー">
<h5 class="modal-title" id="tambahfungsiModal">タンバ ガジ カリヤワン</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</ボタン>
</div>
<div class="モーダルボディ">
<form action="/gaji/insert" method="POST" enctype="multipart/form-data">
@csrf
<div class="コンテンツ">
<div class="行">
<div class="col-sm-12">
<!--JavaScript の変更をクリックして -->
<スクリプトタイプ="text/javascript">
関数ゴロンガン() {
var data = document.getElementById("gol").value;
document.getElementById("tunjangan_gol").value = データ;
}
関数 fungsional() {
var data = document.getElementById("fungsi").value;
document.getElementById("tunjangan_fungsi").value = データ;
}
関数 struktural() {
var data = document.getElementById("struktur").value;
document.getElementById("tunjangan_struktur").value = データ;
}
関数 sum() {
var txtFirstNumberValue = document.getElementById('tunjangan_gol').value;
var txtSecondNumberValue = document.getElementById('tunjangan_fungsi').value;
var txtThreeNumberValue = document.getElementById('tunjangan_struktur').value;
var result = parseFloat(txtFirstNumberValue) parseFloat(txtSecondNumberValue) parseFloat(txtThreeNumberValue);
if (!isNaN(結果)) {
document.getElementById('total').value = 結果;
}
}
</スクリプト>
<div class="フォームグループ">
<select name="nama" type="text" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama') }}">
<option>-- ナマ カリヤワン --</option>
@foreach ($karyawan として $data)
<option value="{{ $data->nama }}">{{ $data->nama }}</option>
@endforeach
</選択>
<div class="無効なフィードバック">
@error('生')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<select name="gol" id="gol" type="text" onclick="golongan()" class="form-control @error('gol') is-invalid @enderror" value="{{ old ('ゴル') }}">
<option>-- ゴロンガン ダン M K G --</option>
@foreach ($golongan として $data)
<オプション値="{{ $data->tunjangan_gol }}">{{ $data->gt;gol }} | {{ $data->mkg }}</option>
@endforeach
</選択>
<div class="無効なフィードバック">
@error('ゴル')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<input name="tunjangan_gol" type="number" id="tunjangan_gol" onclick="sum()" placeholder="Gaji Pokok" class="form-control @error('tunjangan_gol') is-invalid @enderror" value="{{ old('tunjangan_gol') }}" readonly>
<div class="無効なフィードバック">
@error('tunjangan_gol')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<select name="jbt_fungsi" id="fungsi" type="text" onclick="fungsional()" class="form-control @error('jbt_fungsi') is-invalid @enderror" value="{{ old ('jbt_fungsi') }}">
<option>-- Jabatan Fungsional --</option>
@foreach ($fungsi として $data)
<option value="{{ $data->tunjangan_fungsi }}">{{ $data->jbt_fungsi }}</option>
@endforeach
</選択>
<div class="無効なフィードバック">
@error('ゴル')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<input name="function_allowance" type="number" id="functional_allowance" onclick="sum()" placeholder="Functionalallowance" class="form-control @error('function_allowance') is-invalid @enderror" value="{{ old('function_allowance') }}" readonly>
<div class="無効なフィードバック">
@error('function_allowance')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<select name="jbt_struct" id="structural" onclick="structural()" class="form-control @error('jbt_structural') is-invalid @enderror" value="{{ old('jbt_structural') }}">
<option>-- 構造的および機能的位置 --</option>
@foreach ($data としての $struct)
<オプション値="{{ $data->特典構造 }}">{{ $data->jbt_構造 }} | {{ $data->jbt_function }}</option>
@endforeach
</選択>
<div class="無効なフィードバック">
@error('jbt_struction')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<input name="structural_allowance" type="number" id="structural_allowance" onclick="sum()" placeholder="Structural_allowance" class="form-control @error('structural_allowance') is-invalid @enderror" value ="{{ old('benefits_ Structure') }}" 読み取り専用>
<div class="無効なフィードバック">
@error('allowance_struct')
{{ $メッセージ }}
@enderror
</div>
</div>
<div class="フォームグループ">
<input name="total_gaji" type="number" id="total" onclick="sum()" placeholder="給与総額" class="form-control @error('total_gaji') is-invalid @enderror" value="{{ old('total_salary') }}" readonly>
<div class="無効なフィードバック">
@error('合計給与')
{{ $メッセージ }}
@enderror
</div>
</div>
</div>
</div>
</div>
<div class="モーダルフッター">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</フォーム>
</div>
</div>
</div>
何か見逃したことはありますか?これは正しいと思いますが、コードの挿入が間違っている可能性があります...
私の質問を検討して回答していただき、ありがとうございます。
P粉1285631402024-02-27 17:06:00
まずコンソール ログを使用して値を確認し、次に合計もコンソールで表示し、それを合計入力フィールドにプッシュします。私の知る限り、あなたのコードは問題なく、私のコンピューター上で生のHTMLとして動作します。間違った ID を選択した可能性がありますので、確認してください。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-互換" content="IE=edge" />
<meta name="viewport" content="width=device-width、initial-scale=1.0" />
<title>ドキュメント</title>
</head>
<本体>
<input name="num1" type="number" id="num1" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
<input name="num1" type="number" id="num3" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
<input name="num1" type="number" id="num2" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
<input name="num1" type="number" id="total" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
<スクリプト>
関数 sum() {
var txtFirstNumberValue = document.getElementById("num1").value;
var txtSecondNumberValue = document.getElementById("num2").value;
var txtThreeNumberValue = document.getElementById("num3").value;
var result = parseFloat(txtFirstNumberValue) parseFloat(txtSecondNumberValue) parseFloat(txtThreeNumberValue);
if (!isNaN(結果)) {
document.getElementById("合計").value = 結果;
}
}
</スクリプト>
</本文>