How to pass id from button to modal

<div class="panel panel-default">
  <div id="view_query">
    <div class="panel-heading">
      <h3 class="panel-title">Reply Query</h3>
    </div>
    <div class="panel-body">
      <div class="table-responsive">
        <table class="table table-hover table-bordered" id="example-1">
          <thead>
            <th>Name</th>
            <th>Title</th>
            <th class="no-sorting">Description</th>
            <th class="no-sorting">Photo</th>
            <th class="no-sorting">Date</th>
            <th class="no-sorting">Actions</th>
          </thead>
          <tbody>
            <?php for($i=1;$i<=12;$i++){?>
            <tr>
              <td>'NAME'</td>
              <td>'Title'</td>
              <td>'Description'</td>
              <td>
                <img src="" height="80px" width="100px">
              </td>
              <td>'dd/mm/yyyy'</td>
              <td class="action">
                <input type="submit" value="&#xf112;&nbsp;&nbsp;&nbsp;Reply" href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" style="background-color: #313437;border:1px solid #313437" class="btn btn-primary btn-single btn-sm fa-input">
                <input type="text" hidden="" value="<?php echo $i;?>" name="id">
                </input>
              </td>
              <?php }?>
            </tr>
            <!-- <form method="post" action="">
                                    <button name="submit" id="btn_reply" class="btn btn-dark btn_add_record form-control text-left fa-input" value="&#xf112;&nbsp;&nbsp;&nbsp;Reply" style="color:#fff" type="submit"></button>
                                    <input type="text" hidden="" value="<?php echo $i;?>" name="id">
                                </form> -->
            <!-- <a href="index.php?p=query&id= <?php echo $i;?>" id="btn_reply" class="btn btn-primary btn_add_record "><i class="fa fa-reply"></i> Reply</a> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

This is my code of view data.when user click on reply button, i want to display modal.it displayed it but which button is clicked how i know? i want to pass id to identified it so please help me how to pass it.

<div class="modal fade validate" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Reply Query</h4> 
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="control-label">Title</label>
                            <input class="form-control" disabled="" name="question" data-validate="required" data-message-required="Please Enter Title" placeholder="Enter Title" type="text">
                    </div>
                    <div class="form-group col-md-6">
                        <label class="control-label">URL</label>
                        <input class="form-control" name="url" disabled="" data-validate="required" data-message-required="Please Enter URL"  placeholder="Enter URL" type="text">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group no-margin">
                            <label for="description" class="control-label">Description</label>
                            <textarea class="form-control autogrow" id="description" placeholder="Describe Description Regarding Query"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="control-label">Image Upload</label>
                        <div>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput"> <img src="http://placehold.it/200x150" alt="..."> </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                <div> <span class="btn btn-white btn-file"> <span class="fileinput-new">Select image</span> <span class="fileinput-exists">Change</span>
                                    <input type="file" name="..." accept="image/*"> </span> <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">Remove</a> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info">Send</button>
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

This is the code of modal.

回答1:

Will suggest more easy and less complicated approach and bootstrap framework will handle the rest.

replace following

<td class="action">
    <input type="submit" value="&#xf112;&nbsp;&nbsp;&nbsp;Reply" href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" style="background-color: #313437;border:1px solid #313437" class="btn btn-primary btn-single btn-sm fa-input">
    <input type="text" hidden="" value="<?php echo $i;?>" name="id"></input>
</td>

With

<td class="action">
    <button type="button" data-toggle="modal" data-target="#modal-6" data-id="This Is Id" class="btn btn-primary btn-single btn-sm fa-input">Reply</button>
</td>

Use data-toggle and data-target attributes to open the modal and with additional data-id attribute and show.bs.modal or shown.bs.modal modal events, can pass the value to modal

$(document).ready(function() {
  $('#modal-6').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    alert(id);
  });
});

To keep the backdrop: 'static' add it in Modal HTML Markup

<div class="modal fade validate" id="modal-6" data-backdrop="static" data-keyboard="false">
   <!--- Rest of the modal code ---->
</div>

回答2:

I have been inspirited by @Shehary but had to use it with little different syntax.

$(document).ready(function() {
  $('#modal-6').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget.id).selector;
    alert(id);
  });
});