Issue in passing a data id to bootstrap modal

Question

I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these: Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.

What I want

I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.

I have written all the code but the ID is not passing to the modal.

Modal Link Button code

 <a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>

Modal code

 <!-- Modal -->
    <div id="myModal" class="modal fade" 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">Reservation Details</h4><br>
            <h5>Cottage Id :</h5>
            <h5>Cottage Title :</h5>

          </div>
          <div class="modal-body">
            <p>ID WILL SHOW IN THIS TEXT FIELD.
           <input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" /> 
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

JS code

$('#modal-form-show').on('show.bs.modal', function(e) {
  var c_id= $('a[href="#modal-form-show"]').data('id');
  //var c_id= $(this).data(id) - checked both
  $("#cottage").val(c_id);
});

I have taken a text input in modal named cottage and I want show that id in this input.

Old post but found it searching for an answer. The best answer to this question is from https://stackoverflow.com/a/25060114/8620642. To get the data-id use e.relatedTarget — Eryn John, Apr 23 '19 at 00:10

score 4 · Answer 1 · edited Apr 20 '17 at 13:31

4

Try this snippet:

$('.btn-minier').click(function(){
  var c_id = $(this).attr('data-id');
  $('#cottage').val(c_id);
});

edited Apr 20 '17 at 13:31

John Moutafis

22,254
11
68
112

answered Apr 20 '17 at 12:46

PHP Dev

483
3
16

I was using class name same as you but was not working, then i give a id in tag and use that id in this function (#id) and that worked. – J4GD33P 51NGH May 05 '18 at 10:10

Asif Raza · Accepted Answer · 2017-04-21T05:59:57.043

I have change little , when button click show the popup & i've set the value of data-id=2

Button

<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>

I add button in you modal

    <div id="myModal" class="modal fade" 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">Reservation Details</h4><br>
                    <h5>Cottage Id :</h5>
                    <h5>Cottage Title :</h5>

                </div>
                <div class="modal-body">
                    <p>
                        ID WILL SHOW IN THIS TEXT FIELD.
                        <input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>

                </div>
            </div>
        </div>
    </div>

Javascript code

<script>
        $(document).ready(function () {
            $('#btnModalPopup').click(function () {

                var c_id = $(this).data('id');
                console.log(c_id)

                $('#myModal #cottage').val(c_id)
                $('#myModal').modal('show')

            });

   $('#btnSubmit').click(function () {

        alert('submit button click')

        // get the id , from input field.

        var id = document.getElementById('cottage').value;
        console.log(id)
        alert(id)

        //You can set the id - to php variable - then hit to sever by ajax
    })
        });


    </script>

when i get this id there in the modal then how i will use as a php variable because i want to run mysql query on this id — Khan, Apr 20 '17 at 12:55
Well you can use data-id="" , set the value to data-id attribute to anchor tag...and get the value by id in jquery way. — Asif Raza, Apr 20 '17 at 13:54
you can get the value by id on submit/update button click. document.getElementById("myText").value ; then add to php variable — Asif Raza, Apr 20 '17 at 13:58

score 0 · Answer 3 · answered Apr 20 '17 at 11:09

Try using attr method of JQuery

$('#modal-form-show').on('show.bs.modal', function(e) {
    // instead of this
    //var c_id= $('a[href="#modal-form-show"]').data('id');
    // try this one
    var c_id= $('a[href="#modal-form-show"]').attr('data-id');
    //var c_id= $(this).data(id) - checked both
    $("#cottage").val(c_id);
});

Issue in passing a data id to bootstrap modal

3 Answers3