如何将ID从按钮传递到模式 [英] 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=" 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=" 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>
这是我查看数据的代码.当用户单击答复按钮时,我想显示modal.it显示它,但是我知道哪个按钮被单击了? 我想通过ID进行识别,所以请帮助我如何通过它.
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">×</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>
这是模态代码.
推荐答案
将建议更简单,更不复杂的方法,而bootstrap
框架将处理其余的问题.
Will suggest more easy and less complicated approach and bootstrap
framework will handle the rest.
替换以下
<td class="action">
<input type="submit" value=" 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>
使用
<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>
使用data-toggle
和data-target
属性打开模态,并使用其他data-id
属性和show.bs.modal
或shown.bs.modal
模态事件,可以将值传递给模态
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);
});
});
要保留backdrop: 'static'
并将其添加到模式HTML标记中,
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>
这篇关于如何将ID从按钮传递到模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!