How to pass a query string to a bootstrap modal popup in php

Question

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.

My code is as follows :

<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>

<div class="modal fade" id="myModalDetail">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Edit Products Details</h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-lg-12">
          <form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
            <div class="row">
              <div class="col-lg-4">
                <div class="form-group">
                  <label>Product Name</label>
                </div>
              </div>
              <div class="col-lg-6">
                <input class="form-control" name="prodName" value="<?=$prodPrice ?>">
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="form-group">
                  <label>Product Price</label>
                </div>
              </div>
              <div class="col-lg-6">
                <input class="form-control" name="prodPrice" placeholder="Enter product price">
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="form-group">
                  <label>Product Type</label>
                </div>
              </div>
              <div class="col-lg-6">
                <input class="form-control" name="productType" placeholder="Enter product type">
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <input name="button1" type="submit" class="btn btn-primary"> 
      </form>
    </div>
  </div>
  <!-- /.modal-content --> 
</div>
<!-- /.modal-dialog -->
</div>
</div>

Answer 1

As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:

In your a-href code use data-id:

<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>"   data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>

Javascript:

$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});