javascript - 如何使用jquery从输入字段模态 Bootstrap 获取值并将值显示到同一模态中的另一个输入字段？

Question

我有这样的 html 代码:

<div class="modal fade" id="modalTambahDataTransaksiZakat">
<div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">TAMBAH DATA TRANSAKSI ZAKAT</h4>
            </div>
            <div class="modal-body">
                <form role="form" action="" method="post">
                    <div class="box-body">
                         <div class="form-group">
                            <label>Gaji Muzakki</label>
                            <input type="number" class="form-control" id="gaji_muzakki " 
                        name="gajiMuzakki">
                        </div>
                        <div class="form-group">
                            <label>Nominal Pembayaran</label>
                            <input type="number" class="form-control" id="nominal_pembayaran" 
                             name="nominalPembayaran">
                        </div>
                    </div>
            </div>
            </form>

在输入字段“gaji muzakki”中输入值后如何从输入字段“gaji muzakki”获取值，并使用 jquery 将值显示到输入字段“nominal pembayaran”？

Answer 1

这样就可以了

$('#gaji_muzakki').on('change', function(){
  $('#nominal_pembayaran').val($(this).val())
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTambahDataTransaksiZakat">
  Launch modal
</button>

<div class="modal fade" id="modalTambahDataTransaksiZakat">
<div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">TAMBAH DATA TRANSAKSI ZAKAT</h4>
            </div>
            <div class="modal-body">
                <form role="form" action="" method="post">
                    <div class="box-body">
                         <div class="form-group">
                            <label>Gaji Muzakki</label>
                            <input type="number" class="form-control" id="gaji_muzakki" 
                        name="gajiMuzakki">
                        </div>
                        <div class="form-group">
                            <label>Nominal Pembayaran</label>
                            <input type="number" class="form-control" id="nominal_pembayaran" 
                             name="nominalPembayaran">
                        </div>
                    </div>
            </div>
            </form>




 
 <input type="text" id="nominal_pembayaran">