模式弹出窗口中的输入值消失，按钮输入 jquery 值答案

【问题标题】：input value in modal popup disappears, with input jquery value from button模式弹出窗口中的输入值消失，按钮输入 jquery 值
【发布时间】：2022-09-23 08:48:54
【问题描述】：

我需要帮助，我认为这个问题真的超出了我的控制范围，因为我相信我已经正确输入了代码。

在这种情况下，我使用数据表，然后从数据表中有一个按钮发送值进入脚本，那么发送到脚本的值为转发到输入表单在模态弹出窗口，我感到困惑的是，当在浏览器视图中，数据将成功显示在输入表单上，但在响应式（移动）数据表显示上，数据无法显示，我的输入表单为空

非常感谢有人能帮忙，非常感谢

这就是我写的

<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

标签： javascript php html jquery laravel

【解决方案1】：

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

你的代码有一些小问题......

data-bs-target="#modal_edit"

1：与模型 ID 不匹配 2：脚本应该在 document.ready 函数中

我删除了仅用于测试的隐藏表单字段，并且在您可以运行并查看代码的按钮硬编码值中... 我已经在窗口模式和移动模式下对其进行了测试，两者都可以正常工作... 如果您在某些特定设备上遇到问题，请同时解释一下。

【讨论】：