input value in modal popup disappears, with input jquery value from button

Katalina 0
Viewed 37

I need help, I think this problem is really beyond my control, because I believe I have entered the code correctly.

in the case, I use datatable, then from the datatable there is a button to send the value into script, then the value sent to script is forwarded to the Input Form on the Modal Popup, what I am confused about is when in the browser view the data will successfully appear on the Input Form, but on the responsive (mobile) datatable display the data cannot be displayed and my Input Form is empty

very grateful if anyone can help, thank you very much

this is what i wrote

<script>
  $('.data_send').on('click',function(){
    var data_1 = $(this).data('data_1');
    var data_2 = $(this).data('data_2');
    var data_3 = $(this).data('data_3');
    $('#input_1').val(data_1);
    $('#input_2').val(data_2);
    $('#input_3').val(data_3);
    $('#form_send_3').attr('action',"/pegawai/edit_akun/" + data_1);
  });
</script>
<button type="button" 
  class="btn btn-sm btn-link data_send" 
  style="color: red;" 
  data-bs-toggle="modal"
  data-bs-target="#modal_konfirmasi" 
  data-data_1="{{$p->id_peg}}" 
  data-data_2="{{$p->peg_nama}}"
  data-data_3="{{$p->peg_nip}}"
  >
  <i class="fa fa-lg uil uil-trash-alt" ></i>
</button>
            
            
 


<div class="modal fade" id="modal_konfirmasi" tabindex="-1" aria-labelledby="exampleModalLabel"aria-hidden="true" >
    <div class="modal-dialog" >
      <div class="modal-content" >
        <div class="modal-header bg-red" >
          <div class="modal-title" id="exampleModalLabel" style="margin-top: -0.5vh; margin-bottom: -1vh;">
            <h5>Konfirmasi</h5>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
        </div>
        <div class="modal-body" >
          <h6>Yakin ingin menghapus data pegawai:</h6>
            <input id="input_a1" type="text" class="text-center form-control form-control-sm bg-red" >
            <input id="input_a2" type="text" class="text-center form-control form-control-sm bg-red" >
          <p> Aksi tidak dapat di urungkan, dan data tidak dapat dipulihkan</p>
        </div>
        <div class="modal-footer" >
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" >Batal</button>
          <form id="form_send_1" role="form" method="post">
            @csrf
            <input type="text" hidden name="nama" value="{{$p->peg_nama}}" >
            <button type="submit" class="btn btn-sm btn-danger" >Hapus</i></button>
          </form>
        </div>
      </div>
    </div>
  </div>

This image when popup in mobile view - value not appear And this image when popup in browser view - value appear

jquery php laravel javascript html
1 Answers

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="{{ asset('assets/bootstrap5/css/bootstrap.min.css') }}" rel="stylesheet" />

    <script src="{{ asset('assets/bootstrap5/js/bootstrap.min.js') }}" ></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script>
        $(document).ready(function (){
            $('.data_send').on('click',function(){
                var data_1 = $(this).data('data_1');
                var data_2 = $(this).data('data_2');
                var data_3 = $(this).data('data_3');
                $('#input_1').val(data_1);
                $('#input_2').val(data_2);
                $('#input_3').val(data_3);
                $('#form_send_3').attr('action',"/pegawai/edit_akun/" + data_1);
            })
        });
    </script>

</head>
<body>

<button type="button"
        class="btn btn-sm btn-link data_send"
        style="color: red;"
        data-bs-toggle="modal"
        data-bs-target="#modal_edit"
        data-data_1="D1"
        data-data_2="D2"
        data-data_3="D3"
>
    Button
</button>


<div class="modal fade" id="modal_edit" tabindex="-1" aria-labelledby="exampleModalLabel"aria-hidden="true" >
    <div class="modal-dialog modal-lg" >
        <div class="modal-content" >
            <div class="modal-header bg-success" >
                <div class="modal-tittle" style="margin-top: -0.5vh; margin-bottom: -1vh;" >
                    <h5>Edit Pegawai</h5>
                </div>
            </div>
            <div class="modal-body" >
                <h6>Edit Akun</h6>
                <form id="form_send_3" role="form" method="post" action="">
                    @csrf
                    <input id="input_1" type="text" class="form-control" placeholder="Penulisan tanpa spasi" name="id" >
                    <input id="input_2" type="text" class="form-control" placeholder="Penulisan tanpa spasi" name="nama_old" >
                    <div class="row" >
                        <div class="col col-4" >Email</div>
                        <div class="col col-8" >
                            <input id="input_3" type="text" class="form-control form-control-sm" style="margin-bottom:0.5em;" placeholder="email" required name="email">
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col col-4" >Password</div>
                        <div class="col col-8" >
                            <input type="text" class="form-control form-control-sm" style="margin-bottom:0.5em;" placeholder="password" required minlength="8" name="password" >
                        </div>
                    </div>
                    <br>
                    <div class="text-end" >
                        <input type="submit" class="btn btn-sm btn-success" value="Perbarui Password" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>

your code had some minor issues...

data-bs-target="#modal_edit"

1: was not matching model ID 2: the script should be in document.ready function

I have removed hidden form fields just for testing and in button hardcoded values you can run and see code ... I have tested it in window mode and mobile mode both working fine... If you are facing an issue on some specific device then explain it also.

userk7SG0
Related