如何从输入字段模态 bootstrap 获取值并将值显示到与 jquery 相同模态的另一个输入字段？

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" 中键入值并使用 jquery 将值显示到输入字段 "nominal pembayaran" 后如何从输入字段 "gaji muzakki" 获取值？

Answer 1

如果我没理解错的话，它应该很简单：

$(document).on('input', 'input[name="gajiMuzakki"]', function() {
    // Set the value into $value.
    let $value = $(this).val();

    // Populate 'nominalPembayaran' with this value.
    $(document).find('input[name="nominalPembayaran"]').val($value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="gajiMuzakki" placeholder="Gaji Muzakki">
<input type="text" name="nominalPembayaran" placeholder="Nominal Pembayaran">

Answer 2

这样就可以了

$('#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">

如何从输入字段模态 bootstrap 获取值并将值显示到与 jquery 相同模态的另一个输入字段？

How to get value from input field modal bootstrap and show the value to another input field in the same modal with jquery?

javascript

php

jquery

modal-dialog

bootstrap-4