Get data from form and show them in bootstrap modal

Question

i have some rows that each have data attribute attached. when i click on each table row i want to send data attribute to another form, and show the form in modal

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <div class="col-md-3">
      <div class="img-container medium" style="overflow: hidden; position:relative;margin-left:-13px;">
        <img class="loaded" src="img/a.jpg" style="width: auto; height: 245px; top:0px; left:-66px;">
      </div>
    </div>

    <div class="col-lg-4 col-md-3 col-sm-4">
      <div class="namasm">kamar</div>
      lorem ipsum
      <div class="clearfix mt10">
        <span class=""></span>
      </div>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-3 text-center sep">
      <div class="price">
        <span>$20</span>
      </div>
      <div class="mb10 text-muted" id="bb">Price / 1 night(s)</div>
      Capacity :
      <i class="glyphicon glyphicon-user"></i>
      x2
      <p class="lead pt10">
        <button class="btn btn-success btn-lg btn-block" id="kklik" data-name="kamar" data-toggle="modal" data-target="#modalInfo">
          <i class="glyphicon glyphicon-hand-right"></i>
          Book
        </button>

      </p>

    </div>

<div id="modalInfo" class="modal fade" aria-hidden="true" role="dialog" aria-labelledby="modalInfoLabel">
     <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Booking</h4>
      </div>
      <div class="modal-body">
      <!-- php file -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>

I've tried this ( get data attribute and show in bootstrap modal ) but it doesn't work.

Answer 1

    $('#fileInfo tr td').on('click', function(){
        var data = $(this).closest('tr').attr('data-name');
        $('#modalInfo').modal('show');
        $('#modalInfo').find(".filename").html(data);;
    });

data-toggle="modal" data-target="#modalInfo" remove this from table element

Answer 2

You can make like this. its working JSFIDDLE DEMO

<div class="col-md-12">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Your ID</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr id="modal-1">
                <td>Modal Title 1</td>
                <td class="text-right"><button class="btn btn-danger btn-xs" data-id="1" data-title="Modal Title 1" id="check">x</button></td>
            </tr>
            <tr id="modal-2">
                <td>Modal Title 2</td>
                <td class="text-right"><button class="btn btn-danger btn-xs" data-id="2" data-title="Modal Title 2" id="check">x</button></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title">Modal by ID</h4>
            </div>
            <div class="modal-body">
                <p id="content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">CANCEL</button>
            </div>
        </div>
    </div>
</div>

---

$('button#check').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    $('#myModal').data('id', id).modal('show');
      $("#content").html($(this).data("title"));
});