Как получить значение из поля ввода модальное bootstrap и показать значение в другое поле ввода в том же режиме с jquery? - PullRequest
Новая
       7

Как получить значение из поля ввода модальное bootstrap и показать значение в другое поле ввода в том же режиме с jquery?

1 голос
/ 07 февраля 2020

У меня есть код html this: 

<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?

Ответы [ 2 ]

2 голосов
/ 07 февраля 2020

это сделает трюк 

$('#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">
0 голосов
/ 07 февраля 2020

Если я вас правильно понял, это должно быть так просто: 

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