Question

我尝试通过下面的代码传递“ data-id”：

<a data-toggle="modal" data-id="10" class="passingID">
   <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editkaryawan">
       <i class="fas fa-pencil-alt"></i> Edit</button>
</a>

要在此处输入表单值：

<div class="modal-body">
    <form method="post" action="tambahkaryawan.php">
      <input type="hidden" class="form-control" name="idkl" id="idkl" value="">
    </form>
</div>

这是我使用的jquery：

  <script>
    $(document).on("click", ".passingID", function () {
     var ids = $(this).data('id');
     $(".modal-body #idkl").val( ids );
    });
  </script>

Answer 1

我通常将.attr用于data- *属性，并且可以使用。

$(this).attr('data-id');

Answer 2

您也可以尝试使用Jquery显示模式Poup，这样尝试

$(".passingID").click(function () {
    var ids = $(this).attr('data-id');
    $("#idkl").val( ids );
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>




<button type="button" class="btn btn-info btn-lg passingID" data-id="10">Open Modal</button>


<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <form method="post" action="tambahkaryawan.php">
            <input type="text" class="form-control" name="idkl" id="idkl" value="">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

Answer 3

使用attr（）方法获取或设置元素的属性值。

<script>
    $(document).on("click", ".passingID", function () {
     var ids = $(this).attr('data-id');
     $(".modal-body #idkl").val( ids );
    });
</script>

Answer 4

传递一个值或ID相当简单

使用此按钮，我将触发Modal并传递从PHP动态生成的DATA ID，也可以将其设为标题或任何其他所需信息。

 <button data-id="<? echo $note['id'] ?>"  onclick="$('#dataid').val($(this).data('id')); $('#showmodal').modal('show');" >click me</button>

您看到的我的模块名为 showmodal

在模式主体中添加以下代码

<input type="text" name="dataid" id="dataid" value=""/>

这将显示按钮上的值。

我希望这对某人有帮助

从按钮传递数据ID到引导模态

4 个答案: