Passing data-id from button to bootstrap modal - php

Question

I try to pass the 'data-id' from the code below:
<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>
To an input form values here:
<div class="modal-body">
<form method="post" action="tambahkaryawan.php">
<input type="hidden" class="form-control" name="idkl" id="idkl" value="">
</form>
</div>
This is the jquery i use:
<script>
$(document).on("click", ".passingID", function () {
var ids = $(this).data('id');
$(".modal-body #idkl").val( ids );
});
</script>

Answer 1

I usually use .attr for data-* attributes and it works.
$(this).attr('data-id');

Answer 2

it is quite simple to pass a value or ID check this out
with this button, I will trigger the Modal and also pass the DATA ID which is being generated dynamically from PHP you can also make this a title or any other info needed.
<button data-id="<? echo $note['id'] ?>" onclick="$('#dataid').val($(this).data('id')); $('#showmodal').modal('show');" >click me</button>
My modall is called showmodal as you can see
in the modal's body add the following code
<input type="text" name="dataid" id="dataid" value=""/>
this will show the value from the button.
I hope this helps someone

Answer 3

You can also try like this, by using Jquery to show modal 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">×</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>