Issue in passing a data id to bootstrap modal

Ask Time：2017-04-20T19:06:40 Author：Khan

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.

Author:Khan，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/43517800/issue-in-passing-a-data-id-to-bootstrap-modal

PHP Dev :

Try this snippet:\n\n$('.btn-minier').click(function(){\n var c_id = $(this).attr('data-id');\n $('#cottage').val(c_id);\n});\n",

2017-04-20T12:46:04

Asif Raza :

I have change little , when button click show the popup & i've set the value of data-id=2\n\nButton\n\n<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>\n\n\nI add button in you modal\n\n <div id=\"myModal\" class=\"modal fade\" role=\"dialog\">\n <div class=\"modal-dialog\">\n\n \n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\">×</button>\n <h4 class=\"modal-title\">Reservation Details</h4><br>\n <h5>Cottage Id :</h5>\n <h5>Cottage Title :</h5>\n\n </div>\n <div class=\"modal-body\">\n <p>\n ID WILL SHOW IN THIS TEXT FIELD.\n <input type=\"text\" name=\"cottage\" placeholder=\"cottage id\" value=\"\" id=\"cottage\" readonly />\n </p>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n <button type=\"button\" class=\"btn btn-success\" data-dismiss=\"modal\" id=\"btnSubmit\">Submit</button>\n\n </div>\n </div>\n </div>\n </div>\n\n\nJavascript code\n\n<script>\n $(document).ready(function () {\n $('#btnModalPopup').click(function () {\n\n var c_id = $(this).data('id');\n console.log(c_id)\n\n $('#myModal #cottage').val(c_id)\n $('#myModal').modal('show')\n\n });\n\n $('#btnSubmit').click(function () {\n\n alert('submit button click')\n\n // get the id , from input field.\n\n var id = document.getElementById('cottage').value;\n console.log(id)\n alert(id)\n\n //You can set the id - to php variable - then hit to sever by ajax\n })\n });\n\n\n </script>\n",

2017-04-20T12:20:02

Issue in passing a data id to bootstrap modal