我已经使用 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="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</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="/gaji/insert" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="content">
                    <div class="row">
                        <div class="col-sm-12">
                            <!--on clik on change javascript-->
                            <script type="text/javascript">
                                function golongan() {
                                    var data = document.getElementById("gol").value;
                                    document.getElementById("tunjangan_gol").value = data;
                                }
                                function fungsional() {
                                    var data = document.getElementById("fungsi").value;
                                    document.getElementById("tunjangan_fungsi").value = data;
                                }
                                function struktural() {
                                    var data = document.getElementById("struktur").value;
                                    document.getElementById("tunjangan_struktur").value = data;
                                }
                                function 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(result)) {
                                        document.getElementById('total').value = result;
                                    }
                                }
                            </script>
                            <div class="form-group">
                                <select name="nama" type="text" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama') }}">
                                    <option>-- Nama Karyawan --</option>
                                    @foreach ($karyawan as $data)
                                    <option value="{{ $data->nama }}">{{ $data->nama }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('nama')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="gol" id="gol" type="text" onclick="golongan()" class="form-control @error('gol') is-invalid @enderror" value="{{ old('gol') }}">
                                    <option>-- Golongan dan M K G --</option>
                                    @foreach ($golongan as $data)
                                    <option value="{{ $data->tunjangan_gol }}">{{ $data->gol }} | {{ $data->mkg }}</option>
                                    @endforeach
                                </select>
                                <div class=" invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <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="invalid-feedback">
                                    @error('tunjangan_gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <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 as $data)
                                    <option value="{{ $data->tunjangan_fungsi }}">{{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_fungsi" type="number" id="tunjangan_fungsi" onclick="sum()" placeholder="Tunjangan Fungsional" class="form-control @error('tunjangan_fungsi') is-invalid @enderror" value="{{ old('tunjangan_fungsi') }}" readonly>
                                <div class="invalid-feedback">
                                    @error('tunjangan_fungsi')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="jbt_struktur" id="struktur" onclick="struktural()" class="form-control @error('jbt_struktur') is-invalid @enderror" value="{{ old('jbt_struktur') }}">
                                    <option>-- Jabatan Struktural & Fungsional --</option>
                                    @foreach ($struktur as $data)
                                    <option value="{{ $data->tunjangan_struktur }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('jbt_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_struktur" type="number" id="tunjangan_struktur" onclick="sum()" placeholder="Tunjangan Struktural" class="form-control @error('tunjangan_struktur') is-invalid @enderror" value="{{ old('tunjangan_struktur') }}" readonly>
                                <div class="invalid-feedback">
                                    @error('tunjangan_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="total_gaji" type="number" id="total" onclick="sum()" placeholder="Total Gaji" class="form-control @error('total_gaji') is-invalid @enderror" value="{{ old('total_gaji') }}" readonly>
                                <div class="invalid-feedback">
                                    @error('total_gaji')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
有什么我错过的吗?我认为这是正确的,也许我的代码插入有错误......
感谢您花时间查看并回答我的问题。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
首先使用控制台日志检查您的值,然后也控制台总和,然后将其推送到总和输入字段。据我所知,您的代码很好,并且可以在我的电脑上以原始 html 形式运行。所以您可能选择了错误的 id,请检查一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <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="" /> <script> function 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(result)) { document.getElementById("total").value = result; } } </script> </body>