Passing data-id from button to bootstrap modal

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>

@DevsiOdedra the value wont passed to the tag – kelvin sutanto Feb 05 '19 at 09:18 — kelvin sutanto, Feb 05 '19 at 09:18

score 5 · Accepted Answer · answered Feb 05 '19 at 09:06

5

I usually use .attr for data-* attributes and it works.

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

answered Feb 05 '19 at 09:06

WKoppel

504
3
15

@DevsiOdedra `data()` and `attr()` do not do the same thing. See https://stackoverflow.com/questions/7261619/jquery-data-vs-attr – Henrik Erstad Feb 05 '19 at 09:09
Yeah, but dude wanted the actual value of the attribute, so I think that's the way to go. – WKoppel Feb 05 '19 at 09:12
@WKoppel I prefer to use the method you suggest in your answer because of the problems discussed in the thread I linked. I was merely pointing out that `data()` and `attr()` are not synonymous as suggested in the comment before mine which has since been deleted. – Henrik Erstad Feb 05 '19 at 09:16
@WKoppel i tried using attr() but it still doesen't work, i don't know why – kelvin sutanto Feb 05 '19 at 09:25
@kelvinsutanto Can I ask why you marked this as the answer, when you tell that it did not work? – MatthiasA Jul 28 '21 at 15:23

score 5 · Answer 2 · answered Sep 23 '19 at 04:14

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

score 2 · Answer 3 · answered Feb 05 '19 at 09:45

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

Passing data-id from button to bootstrap modal

3 Answers3