如何从输入字段模式引导程序中获取值并将值显示到与 jquery 相同的模式中的另一个输入字段？答案

【问题标题】：How to get value from input field modal bootstrap and show the value to another input field in the same modal with jquery?如何从输入字段模式引导程序中获取值并将值显示到与 jquery 相同的模式中的另一个输入字段？
【发布时间】：2020-05-23 10:23:42
【问题描述】：

我有代码 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”获取值？

【问题讨论】：

您想用name="gajiMuzakki" 中输入的任何内容填充name="nominalPembayaran"？
使用input 事件并研究如何使用val() 来获取和设置输入值
试试这样：$('#gaji_muzakki').keyup(function(){ $('#nominal_pembayaran').val($(this).val()); })

标签： javascript php jquery bootstrap-4 modal-dialog

【解决方案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">

【讨论】：

【解决方案2】：

如果我的理解正确，应该很简单：

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

【讨论】：